如何在Vue CLI上配置process.env环境变量

我们一般用process.env.NODE_ENV来区分开发环境和线上环境。

在开始本文之前，我先强调一下， process.env.NODE_ENV默认只有两种状态即development和production，development指开发环境，说白了就是本地开发即localhost环境（本地的开发），而production代表发布在任何服务上的服务（不管是dat、uat还是生产环境），node是不知道你服务是测试还是正式，除非你手动指定。通常认为都是线上环境。所以可以这样认为development代表本地开发环境，production代表线上环境（包括dat、uat和生产环境等）

其实这一部分在Vue CLI官方文档上是有介绍的。实践出真知，我还是想从我的实践上去总结一下。
平时我们通过vue create test创建一个项目后，会在package.json中的script脚本命令看到这些：

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

npm run serve  运行项目  对应的是process.env.NODE_ENV == development  开发环境

npm run build  打包项目  对应的是process.env.NODE_ENV == production   生产环境

官网上说：
模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

我是这样理解的，
development 模式 -----对应开发环境
test 模式 ------------------对应测试环境
production 模式 --------对应生产环境

那有人会问了，有什么用处呢?
别急，请往下看。

官网上有这样一段话：当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 “production”，在 test 模式下被设置为 “test”，默认则是 “development”。
这是什么意思呢？
意思是说：如果项目中我们没有设置NODE_ENV 变量，那么我们在项目中去使用process.env.NODE_ENV这个变量时，就会跟模式对应起来（相当于Vue CLI已经帮我们做好了设置）。
development 模式 -----process.env.NODE_ENV为development
test 模式 ------------------process.env.NODE_ENV为test
production 模式 --------process.env.NODE_ENV为production

那这可以改吗？
可以

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

vue-cli-service build --mode development

更详细的解释如下：
我们知道

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

npm run serve 运行项目 对应的是process.env.NODE_ENV == development 开发环境

那我想npm run serve 运行项目 对应的是process.env.NODE_ENV == production 生产环境，怎么修改呢？修改如下

"scripts": {
    "serve": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build --mode development"
 },

那这个时候

npm run serve  运行项目  对应的是process.env.NODE_ENV == production   生产环境

npm run build  打包项目  对应的是process.env.NODE_ENV == development  开发环境

有人又有疑问了，–mode 选项参数为命令行覆写默认的模式，–mode后面可以随便写吗？
不可以
在没有设置环境变量的情况下，你写了其他的值，例如 “serve”: “vue-cli-service serve --mode dev”, 最后得到的process.env.NODE_ENV 为 development ，例如 “build”: “vue-cli-service build --mode dev”，在执行npm run build的时候会直接报错。

那我想自定义环境变量或者说自定义模式，怎么定义呢？
你可以在你的项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

一个环境文件只包含环境变量的“键=值”对
例如：

FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value

请注意，只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。
强调一下
注意：只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

进入本文的重点内容：

我会在项目中新建三个文件，如图：

.env.dev文件中的内容

NODE_ENV=dev
VUE_APP_URL=http://192.168.14.22

.env.prod文件中的内容

NODE_ENV=prod
VUE_APP_URL=https://www.baidu.com

.env.dev文件中的内容

NODE_ENV=test
VUE_APP_URL=https://test.baidu.com

package.json中的script脚本命令：

 "scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build.test": "vue-cli-service build --mode test",
    "build": "vue-cli-service build --mode prod"
  },

对应如下：

npm run serve  运行项目  对应的是process.env.NODE_ENV == dev        开发环境

npm run build.test  打包项目  对应的是process.env.NODE_ENV == test  测试环境

npm run build  打包项目  对应的是process.env.NODE_ENV == prod       生产环境

这样就实现了在Vue CLI上自定义配置process.env环境变量

那我们在组件中使用的时候，也会拿到对应的环境变量。

 created(){
    console.log(process.env.NODE_ENV);
    console.log(process.env.VUE_APP_URL);
 }

关于如何在webpack中设置process.env环境变量，请看我的另一篇文章：process.env.NODE_ENV设置生产环境模式