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

环境之间配置可能存在差异，如接口地址、全局参数等。在基于 vue-cli （webpack） 的项目中只需要添加 .env.xxx 文件，然后在 package.json 的 scripts 启动或打包命令中指定 mode 参数即可，获取环境变量时使用 process.env.xxx。vite 使用方式类似，但获取环境变量使用 importa.env。

上面提到，vite 中使用 importa.env 的方式来获取环境变量。在 main.ts 中添加如下代码进行测试：

首先执行 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：是否是服务端渲染模式。

首先执行 yarn build 打包（本质上是执行 vite build），打包完成后通过 yarn preview 对打包结果进行预览。访问预览地址，在浏览器控制塔输出如下：

可以看出模式为 production，非开发模式，是生产模式。

修改 package.json 中的 scripts 命令，分别为开发和打