preface

In the development process, it is generally divided into Intranet, pre-release, production and other different environments, and some configurations of different environments are different. So we need to use environment variables and patterns to distinguish between different environments.

model

To quote the official website:

  • developmentPattern is used tovue-cli-service serve
  • testPattern is used tovue-cli-service test:unit
  • productionPattern is used tovue-cli-service build 和 vue-cli-service test:e2e

You can override the default mode for the command line by passing the –mode option argument. For example, if you want to use development environment variables in build commands:

vue-cli-service build --mode development
Copy the code

When the vue-cli-service command is run, all environment variables are loaded from the corresponding environment file. If the file does not contain the NODE_ENV variable internally, its value will depend on the mode, for example, set to “production” in production mode, “test” in test mode, and “development” by default.

The environment variable

The following four types of environment variable files can be created in vuE-cli3 in the root directory (the same level as package.json) :

Env.[mode] # is loaded only in the specified mode. Git ignores itCopy the code

Environment Variable Configuration

.env

NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_ENV=prod

Copy the code

.env.pre

NODE_ENV=production
VUE_APP_PREVIEW=true
VUE_APP_ENV=preview

Copy the code

.env.test

NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_ENV=test

Copy the code

Each environment variable file contains only “key = value” pairs of environment variables, and only configured variables starting with VUE_APP_ are statically embedded in the client side package by webpack.definePlugin.

NODE_ENV: could be one of “development”, “production”, or “test”. The exact value depends on the mode in which the application is running.

BASE_URL: will correspond to the publicPath option in vue.config.js, which is the base path to which your application will be deployed.

Environment variable access

Loaded and variable will be available to all commands, plug-ins, and dependencies of vue-cli-service. Access process.env.[variable name] in the application code to obtain its value as follows:

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

Mode setting

Add scripts to package.json:

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

Packaged deployment of different environments

Tags trigger CI when deploying, specifying:

  • Intranet environment package version format: -alpha, such as V0.1.0.2-alpha.8,

  • Pre-release environment pack version format: -rc, such as V0.1.0.2 – RC.8,

  • Production environment package version format: -RC, such as V0.1.0.2,

This allows you to differentiate between different environments by their package versions, apply different patterns, and ultimately use different environment configurations. .gitlab-ci.yML important parts are as follows:

. build_tags: stage: build_tags only: - tags script: - export BUILD_TAG = $# CI_COMMIT_REF_NAME online mode - export BUILD_COMMAND = "NPM run build" # network mode - echo $BUILD_TAG | grep - E ". * - alpha. * "&& export BUILD_COMMAND =" NPM run build: test "# pre-release mode - echo $BUILD_TAG | grep -e". * - rc. * "&& export BUILD_COMMAND="npm run build:pre" - npm install - $BUILD_COMMAND ... cache: paths: - node_modules/ tags: - ...Copy the code