Vue CLI项目打包区分环境

不同环境的域名通常是不一致的，因此打包构建时，要区分正式环境和测试环境。

1. 在根目录下创建.env.development、.env.production两个环境变量文件，.env.dev是测试环境，.env.pro是生产环境。

   //.env.development
   NODE_ENV = 'production'
   VUE_APP_MODE = 'development'
   VUE_APP_URL = 'http://cg.entrobus.com/test-api-service/'
   
   //env.production
   NODE_ENV = 'production'
   VUE_APP_MODE = 'production'
   VUE_APP_URL = 'http://cg.entrobus.com/api-service'
   

2. 在package.json里配置运行脚本。

   "scripts": {
       "dev": "vue-cli-service serve",
       "serve": "vue-cli-service serve",
       "build": "vue-cli-service build",
       "lint": "vue-cli-service lint",
       "build:dev": "vue-cli-service build --mode development",
       "build:prod": "vue-cli-service build --mode production"
     },
   

3. 环境不同，域名不同。

   var instance = axios.create({
       baseURL: process.env.VUE_APP_URL,
       timeout: 1000 * 30,
       crossDomain: true, //允许跨域
       withCredentials: true //需要携带cookie
   })
   

4. 在vue.config.js中，根据不同环境设置打包后文件所在的不同目录。

   const mode = process.env.VUE_APP_MODE;
   let publicPath = mode === 'development' ? '/test-source-site/' : '/source-site/' ;
   
   module.exports = {
   	publicPath: publicPath
   }