Vue项目中process.env的用法

在 Vue 项目中， Vue 提供了自己的配置方式。这就要涉及到 Vue CLI 中模式的概念了。 Vue CLI构建后有三种模式

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：

"serve": "vue-cli-service serve",
等价于
"serve": “vue-cli-service serve --mode development”

也就是说，在 Vue 中， env通过 .env 文件或者 .env.[mode] 文件配置。配置后可以在process.env[变量]获取得到。

npm run dev(serve) ，其实是运行了 vue-cli service serve ，默认模式为  development 。可以在根目录的.env.development 文件下修改该模式的环境变量；

//.env.development
ENV = 'development'
# 接口地址
VUE_API  = 'development'

在一个项目中，肯定会存在多个打包命令，而这些命令分别都代表着每一种环境，开发环境、线下测试环境、线上测试环境、生产环境等等，最明显的就是每个环境我们都有不同的接口地址，那么我们就可以在环境变量里去配置，而不用每次都去修改vue.config.js的配置；

示例

第一步：在根目录创建4个env文件

1、.env.development //开发环境

ENV = 'development'
# 接口代理地址
VUE_API  = 'development'

2、.env.offline //线下环境，一般用于打包给测试人员测试

ENV = 'offline'
# 接口代理地址
VUE_API  = 'offline'

3、.env.online_test //线上测试环境

ENV = 'online_test'
# 接口代理地址
VUE_API  = 'online_test'

4、.env.online //线上正式环境

ENV = 'online'
# 接口代理地址
VUE_API  = 'online'

第二步：设置项目启动默认的环境

package.json

  "scripts": {
    "serve": "vue-cli-service serve",
    "build:offline": "vue-cli-service build --mode offline",
    "build:online_test": "vue-cli-service build --mode online_test",
    "build:online": "vue-cli-service build --mode online",
  },

第三步：在vue.config.js打印是否成功

console.log(process.env.ENV)
console.log(process.env.VUE_API)

这样就可以在vue.config.js种配置不同打包环境下使用不同的变量。