在项目或产品的迭代过程中,通常会有多套环境,常见的有:
- dev:开发环境
- sit:集成测试环境
- uat:用户接收测试环境
- pre:预生产环境
- prod:生产环境
环境之间配置可能存在差异,如接口地址、全局参数等。在基于 vue-cli (webpack) 的项目中只需要添加 .env.xxx 文件,然后在 package.json 的 scripts 启动或打包命令中指定 mode 参数即可,获取环境变量时使用 process.env.xxx。vite 使用方式类似,但获取环境变量使用 import.meta.env。
1 环境变量和模式
上面提到,vite 中使用 import.meta.env 的方式来获取环境变量。在 main.ts 中添加如下代码进行测试:
const env = import.meta.env
console.log(env)
1.1 development
首先执行 yarn dev 启动服务,在浏览器控制台输出 env 的值:
可以看出 import.mata.env 中默认包括五个内置环境变量:
MODE:应用的运行模式。由于我们是通过 yarn dev 启动服务,而 yarn dev 本质是执行 vite 启动,未显式执行 mode,故 MODE 的值为 development;
BASE_URL:部署应用时的基本 URL,在 vite 的配置文件 vite.config.ts 中的 base 属性指定;
PROD:是否是生产环境(即是否通过 vite build 构建)
DEV:是否是开发环境(即是否通过 vite 启动服务运行)
SSR:是否是服务端渲染模式。
1.2 production
首先执行 yarn build 打包(本质上是执行 vite build),打包完成后通过 yarn preview 对打包结果进行预览。访问预览地址,在浏览器控制塔输出如下:
可以看出模式为 production,非开发模式,是生产模式。
1.3 指定模式
修改 package.json 中的 scripts 命令,分别为开发和