vue不同環境下的配置

需求
有時候，項目會有很多環境，比如最常用會有一下環境，
develop：本地開發環境
alpha：測試/預發布環境
production：正式/生產環境
不同環境下，打包、部署和api的調用都是不同的。
如果每次都頻繁修改代碼，明顯是不理智的
那么有沒有類似於java的springBoot可以按照命令調用不同配置文件啟動呢？

java -jar -Dspring.profiles.active=test demo-0.0.1-SNAPSHOT.jar

答案是肯定的。

使用如下
在package.json新增命令腳本

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "serve:alpha": "vue-cli-service serve --mode alphaser",
    "build:alpha": "vue-cli-service build --mode alpha"
  },

在項目根目錄下，新增配置文件
--mode alphaser意思為指定環境模式為alphaser,會調用.env.alphaser文件。默認不指定則為development。所以我們建立多個配置文件

 

 

比如.env.alphaser，內容大致如下
這些變量，是整個項目都可以訪問全局變量

NODE_ENV = development
BASE_URL = /
VUE_APP_ENV = development
VUE_APP_ENV_CHN = 前端環境：本地開發環境。 后端環境：測試服環境
VUE_APP_SERVER = https://t-12368-h5.aegis-info.com/casservice/web/v1/

 

比如.env.production，內容大致如下

NODE_ENV = production
BASE_URL = /caspage/
VUE_APP_ENV = production
VUE_APP_ENV_CHN = 前端環境：正式環境。 后端環境：正式服環境
VUE_APP_SERVER = https://shandong-12368.aegis-info.com/casservice

 

 

 

 

然后對vue項目做如下改造
vue.config.js
動態配置打包的路徑和目錄（即項目內所有的請求鏈接地址都是publicPath）
本地開發代理地址proxy

module.exports = {
  publicPath: process.env.BASE_URL,
  devServer: {
    proxy: process.env.VUE_APP_SERVER
  }
};

如果項目里使用aixos，那么還要對其配置

// 本地會自動走vue.config.js里的代理地址，不需要配置baseUrl。否則代理會失效
if (process.env.VUE_APP_ENV !== 'development') {
  axios.defaults.baseURL = process.env.VUE_APP_SERVER;
}

如果你的路由采用history模式
配置路由，因為服務器可能不一定將你的項目放在根目錄下

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

試試吧

[本地開發啟動]

使用本地服務接口：npm run serve
使用測試服務接口：npm run serve:alpha

[線上打包部署]

使用測試服務接口：npm run build:alpha
使用正式服務接口：npm run build

運維
如果你使用的是teamcity自動化部署或者手動部署來管理項目，你可能要做如下適配（修改編譯的命令）


 

 

 

 

vue的后端部署
閱讀本文