如果在业务代码里需要根据不同的环境做不同的处理的话，你可能需要为浏览器端代码设置环境变量

以 VUE_APP_ 开头的变量

在之前的文章里我们已经为不同的环境配置了不同的 env 文件

在环境文件中配置的环境变量可以直接在 node 环境下使用

如果想让这个环境变量在浏览器端也起作用，那它的变量名需要以 VUE_APP_ 开头

举例

例如，我们有同属 production 的两个版本，对应的环境文件： .env.version_a .env.version_b

业务代码需要针对 versionA 和 versionB 作不同的处理，那就需要一个变量指出不同的版本

.env.version_a

1

VUE_APP_VERSION=i_am_a

.env.version_b

1

VUE_APP_VERSION=i_am_b

配置好之后，在前端代码里就可以使用这个环境变量 VUE_APP_VERSION

1
2
3
4
5

if (process.env.VUE_APP_VERSION === 'i_am_a') {
  // 针对版本A的逻辑
} else if (process.env.VUE_APP_VERSION === 'i_am_b') {
  // 针对版本B的逻辑
}

Vue CLI 文档里还提到了：除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量

• NODE_ENV - 会是 “development”、”production” 或 “test” 中的一个。具体的值取决于应用运行的模式。
• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径

在客户端侧代码中使用环境变量