vite|webpack环境变量-多模式配置

vite官方文档：环境变量和模式 | Vite (vitejs.net) （https://www.vitejs.net/guide/env-and-mode.html）

一、工程根目录创建env文件如下：

• 文件中参数书写格式： VITE_XXXXXX = XXXXXX。必须使用等号。必须以VITE_开头。
• 为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。如果想自定义 env 变量的前缀，请参阅 envPrefix。
• .env.*.local 文件应是本地的，可以包含敏感变量。你应该将 .local 添加到你的 .gitignore 中，以避免它们被 git 检入。

二、在package.json文件中添加图中代码：

• "dev": "vite",= 默认加载.env.development.local或者.env.development（开发环境），在自己电脑上修改.local文件就行，这个文件不会被上传到git仓库中，这样就可以避免多人修改这个文件导致39服务器参数错误。
• "staging": "vite --mode staging"= (可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。) 这样就会加载.env.staging（预发布环境）文件
• "build": "vue-tsc && vite build"= 默认加载.env.production文件（生产环境）

三、使用.env.xxx中的参数
Vite 在一个特殊的 ​import.meta.env​ 对象上暴露环境变量。

运行测试：npm run staging

四、智能提示。随着文件的参数慢慢定义的越来越多，想要在代码中获取这些以 ​VITE_​ 为前缀的用户自定义环境变量的 TypeScript 智能提示

在 src 目录下创建一个 env.d.ts 文件并且写入：

项目demo:【免费】vite环境变量-多模式配置资源-CSDN文库

---

webpack与vite配置几乎一样，不同点如下：（建议vue项目使用vite，原因很多，主要快~）

• 只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。（vite是以VITE_开头）
• webpack中使用process.env（vite中​import.meta.env​）
• package.json中要修改启动命令，样例：