前提：各種vue環境已經配置完畢，vue-cli腳手架安裝好，
1.在專案根目錄創建如下圖所示三個檔案，分別取名為 .env.development .env.production .env.test
2.然后在這三個檔案里依次寫入如下內容：
NODE_ENV = ‘development’
VUE_APP_CURENV = ‘development’
NODE_ENV = ‘production’
VUE_APP_CURENV = ‘production’
NODE_ENV = ‘test’
VUE_APP_CURENV = ‘test’
3.在專案vue.config.js檔案里添加如下代碼（沒有vue.config.js的可以手動在專案根目錄創建）
switch(process.env.VUE_APP_CURENV){
case ‘development’:
console.log(‘當前運行環境為：開發環境’)
break;
case ‘test’:
console.log(‘當前運行環境為：測驗環境’)
break;
case ‘production’:
console.log(‘當前運行環境為：生產環境’)
break;
}
4.在專案api.js里添加如下代碼（api.js為專案中封裝axios檔案，可以根據自己實際封裝情況而定；其中comUrl為公共介面地址，可根據自己專案實際情況而定）
switch(process.env.VUE_APP_CURENV){
case ‘development’:
comUrl = ‘http://localhost:3333’;
break;
case ‘test’:
comUrl = ‘http://localhost:5555’;
break;
case ‘production’:
comUrl = ‘http://localhost:6666’;
break;
}
5.打開package.json檔案，修改打包命令如下圖
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build --mode production”,
“build:test”: “vue-cli-service build --mode test”,
“lint”: “vue-cli-service lint”
},
至此我們的專案已經配置完畢了，然后可以通過npm run serve啟動專案，npm run build 打包專案（生產環境）npm run build:test 打包專案（測驗環境）
PS:可以仿照上面配置配置其他各種環境例如培訓環境等等，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/204997.html
標籤：其他