09-配置多环境打包

如何配置多环境的打包呢？因为各个环境的接口地址也不同，所以这就引出了需要配置不同环境来进行打包。

• 在根目录下新建.env文件

NODE_ENV = 'production'
VUE_APP_TYPE = 'pro'
outputDir = dist

• 在根目录下新建.env.test文件

NODE_ENV = 'production'
VUE_APP_TYPE = 'test'
outputDir = test

• 修改vue.config.js，根据环境不同更换输出目录

module.exports = {
    ...
    outputDir: process.env.outputDir,
   ...
}

• 修改package.json文件的执行代码，增加test命令

 "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },

• 说明
  • NODE_ENV为环境类型，生产和测试都是production。
  • VUE_APP_TYPE这个可以在main.js 通过process.env.VUE_APP_TYPE访问到，由它来选择多环境的不同地址。
  • outputDir为打包输出目录。
  • ps:以上文件都不能在里面写//注释，以后学完axios再回来补充。