vuecli3的环境变量配置

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

今天在看vuecli3的环境变量配置，记录下学习笔记。一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对应每一个环境可能都会有所差异，比如说服务器地址、接口地址等等。在环境切换的时候，就需要不同的配置参数，所以就可以用环境变量和模式，来方便我们管理。

你可以替换你的项目根目录中的下列文件来指定环境变量：

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

在package.json文件中添加test环境

 "scripts": {
    "serve": "vue-cli-service serve",    //开发环境
    "build": "vue-cli-service build",    //生产环境
    "test": "vue-cli-service build --mode test",  //自定义的生产环境
    "lint": "vue-cli-service lint"
  },

在根目录下创建.env文件，并配置 

NODE_ENV = 'production'
VUE_APP_FLAG = 'pro'
VUE_APP_TITLE= 'My App2'

在根目录下创建.env.test文件

NODE_ENV = 'production'
VUE_APP_TITLE='test'
VUE_APP_FLAG = 'test'
VUE_APP_TITLE= 'My App Test'
outputDir = 'test'

• vue-cli-service build 会加载可能存在的 .env、.env.production 和 .env.production.local 文件然后构建出生产环境应用；

• vue-cli-service build --mode test 会在 staging 模式下加载可能存在的 .env、.env.test 和 .env.test.local 文件然后构建出生产环境应用。

提示

你可以在 vue.config.js 文件中计算环境变量。它们仍然需要以 VUE_APP_ 前缀开头。这可以用于版本信息 process.env.VUE_APP_VERSION = require('./package.json').version。

然后我们在main.js文件里面就可以获取到我们配置的环境变量

/*第一层if判断生产环境和开发环境*/
if (process.env.NODE_ENV === 'production') {
  /*第二层if，根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
  if (process.env.VUE_APP_FLAG === 'pro') {
    //production 生产环境
    window.console.log('http://api.xxxx.com');//路径

  } else {
    //test 测试环境
    window.console.log('http://192.168.1.1:3030');//路径
  }
} else { //dev 开发环境 
  window.console.log('这是开发环境')
}

在index.html里面获取环境变量里面的配置信息

BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

 执行npm run test  env.test的优先级比env的优先级高，覆盖env里面的同名配置

然后也打包出来了一个test文件夹

完！

错误之处，忘指正！