vue-cli3中自定义环境变量和模式配置

前言

在开发过程中，一般分为内网，预发布，生产等不同环境，并且不同环境的一些配置不同。所以我们需要去使用环境变量和模式来区分不同的环境。

模式

引用官网的解释：

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e 可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：

vue-cli-service build --mode development

当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 "production"，在 test 模式下被设置为 "test"，默认则是 "development"。

环境变量

在vue-cli3中可以在根目录（与package.json同级）中创建以下四种类型的环境变量文件：

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

环境变量配置

.env

NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_ENV=prod

.env.pre

NODE_ENV=production
VUE_APP_PREVIEW=true
VUE_APP_ENV=preview

.env.test

NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_ENV=test

每一个环境变量文件中只包含环境变量的“键=值”对，所配置的变量中只有以VUE_APP_开头的变量才会被webpack.DefinePlugin静态嵌入到客户端侧包中。

NODE_ENV ：会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。

BASE_URL ：会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径，打包资源路径前面会加上这个。

环境变量访问

被载入和变量将会对vue-cli-service的所有命令、插件和依赖可用。在应用代码中通过process.env.[变量名]进行访问，从而获取到它的值，如下：

 serverID: process.env.VUE_APP_ENV === 'prod' ? 1010 : 1019

模式设置

在package.json中scripts添加：

  "scripts": {
    "build": "vue-cli-service build",
    "build:pre": "vue-cli-service build --mode pre",
    "build:test": "vue-cli-service build --mode test",
  },

不同环境的打包部署

部署的时候通过tags触发ci，规定：

• 内网环境包版本格式：-alpha,如v0.1.0.2-alpha.8，

• 预发布环境包版本格式：-rc,如v0.1.0.2-rc.8，

• 生产环境包版本格式：-rc,如v0.1.0.2，

这样就可以通过不同环境的包版本来区分不同环境，从而应用不同的模式，最终使用不同的环境配置。 .gitlab-ci.yml 重要部分如下：

...

build_tags:
stage: build_tags
only:
  - tags
script:
  - export BUILD_TAG=$CI_COMMIT_REF_NAME
  # 线上模式
  - export BUILD_COMMAND="npm run build"
  # 内网模式
  - echo $BUILD_TAG | grep -E ".*-alpha.*" && export BUILD_COMMAND="npm run build:test"
  # 预发布模式
  - echo $BUILD_TAG | grep -E ".*-rc.*" && export BUILD_COMMAND="npm run build:pre"
  - npm install 
  - $BUILD_COMMAND
  ...

cache:
  paths:
    - node_modules/
tags:
  - ...