vue-cli3打包项目不同环境：开发环境、生产环境、测试环境

文档

• https://cli.vuejs.org/zh/guide/mode-and-env.html

package.json

{
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-alpha": "vue-cli-service build --mode=alpha"
  }
}

开发环境：

# 默认：process.env.NODE_ENV=development
$ vue-cli-service serve  

.evn.development

NODE_ENV='development'

VUE_APP_MODE = 'development'

VUE_APP_BASE_URL = 'https://development.demo.com'

生产环境：

# 默认：process.env.NODE_ENV=production
$ vue-cli-service build

.env.production

NODE_ENV='production'

VUE_APP_MODE = 'production'

VUE_APP_BASE_URL = 'https://production.demo.com'

测试环境：

$ vue-cli-service build --mode alpha

.env.alpha

NODE_ENV='production'

VUE_APP_MODE = 'alpha'

VUE_APP_BASE_URL = 'http://development.demo.com'

mode后面添加test、production 等预留参数无效

用户自定义的变量需要以 VUE_APP_ 前缀开头，才能在代码中访问到变量

console.log(process.env.VUE_APP_MODE)

使用参数

const BASE_URL = process.env.VUE_APP_BASE_URL