vite+ts+vue3环境变量和模式配置

根据不同的模式,设置http接口请求地址的baseURL。根据我自己的理解记录一下,如有不正确的地方请指正。
先说一下配置的要求:
在开发环境(执行命令vite dev/serve)下,接口地址可以在测试服务器和正式服务器之间切换。
在生产环境(vite build)下,接口地址可以在测试服务器和正式服务器之间切换。

版本信息:
"vite": "^4.0.0",
"vue": "^3.2.45",
"typescript": "~4.7.4",

配置实现:

1. 在根目录下新建文件:
//.env.development

VITE_BASE_API = https://***-test.cn:8391

//.env.production

VITE_BASE_API = https://***.cn

//.env.staging

VITE_DEV_SERVER = https://***-test.cn:8391
VITE_SERVER = https://***.cn

2.在请求封装文件request.ts中引用

let baseURL = ''
if(import.meta.env.MODE === 'staging') { // 预备模式
 // baseURL = process.env.NODE_ENV === 'development' ? import.meta.env.VITE_SERVER : import.meta.env.VITE_DEV_SERVER
 baseURL = import.meta.env.DEV ? import.meta.env.VITE_SERVER : import.meta.env.VITE_DEV_SERVER
} else { // development或production模式
 baseURL = import.meta.env.VITE_BASE_API
}

3.在package.json的scripts项添加以下命令

"scripts": {
 "dev:staging": "vite dev --mode staging",
 "build:staging": "run-p type-check build-only-staging",
 "build-only-staging": "vite build --mode staging",
}

4.TypeScript的智能提示
在src目录下创建一个env.d.ts文件,接着按下面这样增加ImportMetaEnv的定义:

/// <reference types="vite/client" />
interface ImportMetaEnv {
 readonly VITE_APP_TITLE: string
 readonly VITE_BASE_API: string
 readonly VITE_DEV_SERVER: string
 readonly VITE_SERVER: string
 // 更多环境变量...
}
interface ImportMeta {
 readonly env: ImportMetaEnv
}

5.使用

开发环境下使用正式服务器:
npm run dev:staging
生产环境下使用测试服务器:
npm run build:staging

环境变量和模式

参考:
https://cn.vitejs.dev/guide/e...
https://cn.vitejs.dev/config/...

默认情况下,执行命令vite dev/serve(开发环境),运行在development(开发)模式;执行命令vite build(生产环境)运行在production(生产)模式。
模式可以通过vite.config.ts中的mode选项配置。但是会把serve和build时的模式都覆盖掉。推荐通过命令行--mode选项来重写。

.env 文件

Vite使用dotenv从环境目录中的下列文件加载额外的环境变量:
环境目录:vite.config.ts的envDir选项可配置,默认root。

.env # 所有情况下都会加载
.env.local # 所有情况下都会加载,但会被 git 忽略
.env.[mode] # 只在指定模式下加载
.env.[mode].local # 只在指定模式下加载,但会被 git 忽略

比如:当执行vite build时,它会自动加载项目根目录下的.env.production中可能存在的环境变量。

# .env.production
VITE_BASE_API = https://***.cn
MY_TITLE = HELLO

在应用中,可以使用import.meta.env.VITE_BASE_API设置请求地址的baseURL。
vite通过对象import.meta.env暴露出来的变量,应用的.vue和.ts/js文件中都可以访问到。但是只有以envPrefix开头的环境变量会通过import.meta.env暴露在客户端源码中。
比如上面的MY_TITLE就不能通过import.meta.env.MY_TITLE访问到。

envPrefix
vite.config.ts的配置选项,默认:VITE_

拓展变量
Vite使用dotenv-expand来直接拓展变量(扩展到process.env上)。
参考:https://github.com/motdotla/d...

环境变量

Vite在import.meta.env对象上暴露的在所有情况下都可以使用的内建变量:

import.meta.env.MODE: {string} 应用运行的模式。
import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

import.meta.env.PROD和import.meta.env.DEV与process.env.NODE_ENV一致,与执行的命令有关。
import.meta.env.MODE与mode配置的运行模式一致。

在配置中使用环境变量

参考:https://cn.vitejs.dev/config/
配置文件vite.config.ts中,环境变量通常可以从 process.env 获得。
注意:Vite 默认是不加载 .env 文件的,因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个,举个例子,root 和 envDir 选项会影响加载行为。不过当你的确需要时,你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。

import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {
 // 根据当前工作目录中的 `mode` 加载 .env 文件
 // 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。
 const env = loadEnv(mode, process.cwd(), '')
 return {
 // vite 配置
 define: {
 __APP_ENV__: env.APP_ENV,
 },
 }
})

问题:

在我另一个项目中:
"vite": "^3.2.4",
"vue": "^3.2.45",
"typescript": "~4.7.4",

用命令选项--mode配置模式,不仅会修改import.meta.env.MODE,还会修改 process.env.NODE_ENV。此时import.meta.env.DEV与process.env.NODE_ENV就不一致了。
因此在客户端代码中尽量用import.meta.env.DEV或import.meta.env.PROD来判断运行环境。

作者:lavender原文地址:https://segmentfault.com/a/1190000043467574

%s 个评论

要回复文章请先登录注册