Vue3 Vite3 多环境配置 - 基于 vite 创建 vue3 全家桶项目(续篇）

在项目或产品的迭代过程中，通常会有多套环境，常见的有：

• 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 命令，分别为开发和打