一. 目标

• 各种环境配置

二. 实现

项目开发中, 一般会有2到3套环境, 比如开发环境,预生产环境,生产环境等; 相应的,我们项目中也会为各种环境做出相应的配置,以满足开发需求.

1.vue-cli3的模式(mode)

在vue-cli-service命令中传入mode命令, 就会加载相应的环境文件, 进而做到根据打包命令生成不同环境的项目代码.

vue-cli-service build --mode development

2.环境文件

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

当运行vue-cli-service build --mode development时, 会加载.env.development和.env.development.local

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

环境文件是键值对的方式来定义变量

FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value

package.js中命令说明

...
"scripts": {
    "serve:dev": "vue-cli-service serve --mode dev",
    "serve:pre": "vue-cli-service serve --mode pre",
    "serve:prd": "vue-cli-service serve --mode prd",
    "build:dev": "vue-cli-service build --mode dev",
    "build:pre": "vue-cli-service build --mode pre",
    "build:prd": "vue-cli-service build --mode prd",
    "lint": "vue-cli-service lint"
  },
...

3. 以3种环境为例

开发环境,预生产环境,生产环境

• 新建3种环境文件

.env.dev
.env.pre
.env.prd

• 设置环境变量 设置NODE_ENV和VUE_APP_ENV变量,在代码中可以正常使用

// .env.dev
NODE_ENV=dev
VUE_APP_ENV=dev

// .env.pre
NODE_ENV=production
VUE_APP_ENV=pre

// .env.prd
NODE_ENV=production
VUE_APP_ENV=prd

• 代码中使用环境变量

<template>
  ...
</template>

<script>
...
	created() {
		console.log('当前环境变量NODE_ENV:', process.env.NODE_ENV);
		console.log('当前环境变量VUE_APP_ENV:', process.env.VUE_APP_ENV);
	}
}
</script>

• package.js中命令说明

...
"scripts": {
    "serve:dev": "vue-cli-service serve --mode dev",
    "serve:pre": "vue-cli-service serve --mode pre",
    "serve:prd": "vue-cli-service serve --mode prd",
    "build:dev": "vue-cli-service build --mode dev",
    "build:pre": "vue-cli-service build --mode pre",
    "build:prd": "vue-cli-service build --mode prd",
    "lint": "vue-cli-service lint"
  },
...