Vue3配置环境变量

在前端项目中，难免会遇到开发环境、测试环境与生产环境环境变量不一致的情况，逐个去判断process.env.NODE_ENV显然很不方便，可以按以下方式配置三种环境的环境变量，vue会根据打包命令将环境变量写入到app中。

1. 在根目录下新建环境变量配置文件

在根目录下创建如下三个配置文件：

并在配置文件中配置所需的环境变量：
.env.development:

NODE_ENV = development
VUE_APP_ENV = prod

.env.test:

NODE_ENV = production
VUE_APP_ENV = test

.env.production:

NODE_ENV = production
VUE_APP_ENV = prod

需要注意的是，只有变量名为NODE_ENV, BASE_URL, 以及以VUE_APP开头的变量才会生效，同时变量值不能包含引号。

2.配置打包命令

配置好了环境变量，还需要在 package.json 中配置打包命令，可按如下方式配置：

"scripts": {
  "serve": "vue-cli-service serve --open",
  "dev": "vue-cli-service build --mode development",
  "test": "vue-cli-service build --mode test",
  "build": "vue-cli-service build --mode production",
  "all": "vue-cli-service build --mode development && vue-cli-service build --mode test && vue-cli-service build --mode production",
  "lint": "vue-cli-service lint"
},

配置完成后再执行npm run serve或者打包，对应的环境变量就会生效

3.使用环境变量

在代码中，直接使用process.env.环境变量名，就可以直接调用啦。