环境变量篇-vue3的H5项目从0到1工程化落地经验篇2

环境变量之所以能起作用是因为有工具，vue2中有vue cli, vue3中有vite,所以当配置环境变量的时候得看他们的文档，我们本篇主要说的是vite的环境变量。
环境变量和模式 | Vite 官方中文文档

这次的项目经验本来想写成一篇，奈何太长，于是写成一个系列了。这是该系列的第二篇，其他链接在文尾。

环境变量是定义在根目录下的一系列.env文件内的变量。让我们可以在不同环境中配置一次，以后都不用配置相关资源路径。比如图片服务器地址，开发、测试、生产用的都是不同的地址。又比如api接口地址，开发、测试、生产用的都是不同的地址。

各种各样的.env文件名

一般在项目中能看到的.env文件有这些：

最常用有四个环境，开发环境，测试环境，预发布环境（灰度环境）、生产环境。每个环境可以有两个.env文件，一个是.env.mode一个是.env.mode.local。所以算下来有8个这种文件。

当然这些并不是必须有，根据你项目的实际情况用相应的环境就好。

lua 复制代码

开发环境-也就是npm run dev时使用的变量
.env.development
开发环境本地-同时存在时本地的会覆盖上边的，且会被gitignore忽略
.env.development.local
测试环境-也就是npm run test(对应命令vite build --mode test)时使用的变量
.env.test
测试环境本地-同时存在时本地的会覆盖上边的，且会被gitignore忽略
.env.test.local
预发布环境-也就是npm run stage(对应命令vite build --mode staging)时使用的变量
.env.staging
.env.staging.local
生产环境-也就是npm run build时使用的变量
.env.production
生产环境本地-同时存在时本地的会覆盖上边的，且会被gitignore忽略
.env.production.local
如果不指定任何环境，那么总是会被加载，但是如果有对应环境的.env,则会被其他覆盖，.env内的变量不会起作用
.env

能被.gitignore忽略自然是因为.gitignore里边有相应的设置。比如下图，所以才能忽略所有的.local文件。

.env文件命名不一定非要development、production、test、staging。是可以自定义的，前提是得在package.json里面做对应的名称修改！(注意命名要语义化方便理解)

bash 复制代码

scripts": {
    "dev": "vite",
    "test": "vite build --mode test",
    "stage": "vite build --mode staging",
    "build": "vite build",
  },

比如我的stage这一行，执行的时候输入npm run stage,它实际执行的是vite build --mode staging，它使用的环境变量的文件就是.env.staging或者其local文件。注意到这个名字的一致与不一致了吗？实际中最好是一致的，省的给自己找麻烦。也有人这么用，如下：

bash 复制代码

scripts": {
    "dev": "vite",
    "test": "vite build --mode test",
    "build:staging": "vite build --mode staging",
    "build": "vite build",
  },

只要理解了，一切都是咱们的工具。

各种.env文件里边怎么写？

理论上来说定义各种变量名都可以，大小写都可以，但是我们实际上是有约束的。

约束自然也是为了我们好，为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。

变量名有要求:

第一类：客户端内用（就是你的各种组件中用）

以 VITE_ 为前缀（这是因为是vue3,构建工具是vite,如果是vue2、vue cli中，那么就得以**VUE_APP_**为前缀）。vite中的得是这种格式：

arduino 复制代码

VITE_SOME_KEY=123
console.log(import.meta.env.VITE_SOME_KEY) // "123"
// 以VITE_开头就可以获取到

DB_PASSWORD=foobar
console.log(import.meta.env.DB_PASSWORD) // undefined
// 不以VITE_开头就获取不到，所以是undefined

// Vue CLI（基于 process.env）
const apiUrl = process.env.VUE_APP_API_BASE_URL;

// Vite（基于 import.meta.env）
const apiUrl = import.meta.env.VITE_API_BASE_URL;

第二类：服务端/构建脚本专用变量

以其他前缀命名（如 **SERVER_**），仅在 **vite.config.js** 中通过 **process.env** 访问：

ini 复制代码

# .env
SERVER_SECRET = my-secret-key
MY_KEY = 'xxx'

使用时：in **vite.config.js**,别的地方都不能用。

arduino 复制代码

// vite.config.js
export default defineConfig({
  define: {
    __SERVER_SECRET__: JSON.stringify(process.env.SERVER_SECRET)
  }
});

典型的.env文件

我把常用的都放了这里，下次可以直接复制粘贴，省的再写一遍了，各位需要啥就复制走啥哈自取

ini 复制代码

# 通用配置（.env）
VUE_APP_PROJECT_NAME = MyVue3App  # Vue CLI
VITE_PROJECT_NAME = MyVue3App     # Vite

# 开发环境配置（.env.development）
VUE_APP_API_BASE_URL = http://localhost:3000/api  # Vue CLI
VITE_API_BASE_URL = http://localhost:3000/api     # Vite
VUE_APP_DEBUG = true                              # 开启调试模式
VITE_ENV = development													  # 当前环境
VITE_GOOGLE_MAPS_API_KEY = ''                     # 第三方服务密钥
VITE_FEATURE_NEW_UI = true												# A/B测试或功能灰度发布

# 生产环境配置（.env.production）
VUE_APP_API_BASE_URL = https://api.example.com
VITE_API_BASE_URL = https://api.example.com
VUE_APP_DEBUG = false
VITE_ENV = production													    # 当前环境
VITE_GOOGLE_MAPS_API_KEY = ''                     # 第三方服务密钥
VITE_FEATURE_NEW_UI = true												# A/B测试或功能灰度发布

生效时间

改动会在重启服务器后生效,所以别忘记重启了哟~

各位看官大老爷，觉得满意就给个点赞❤。不满意就请在评论里发表意见。交流才能才来进步，感谢各位不吝赐教。

这次的项目经验本来想写成一篇，奈何太长，于是写成一个系列了。其他系列的链接以后也会更新到这篇，敬请期待。

vue3的H5项目从0到1工程化落地经验，全系列太长，建议收藏vue3的H5项目从0到1工程化落地经验，全系列太长，建议 - 掘金