原文https://blog.csdn.net/linbenjian/article/details/85261201
使用vue-cli3打包項目,通過配置不同的指令給項目設置不一樣的配置。
npm run serve時會把process.env.NODE_ENV設置爲‘development’;
npm run build 時會把process.env.NvODE_ENV設置爲‘production’;
此時只要根據process.env.NODE_ENV設置不同請求url就可以很簡單的區分出本地和線上環境。
頭疼的是打包時線上環境可能分多種,比如測試環境和生產環境等等。
在vue-cli2中打包時可以修改 “build” 和 “config”中的文件來區分不同的線上環境
而vue-cli3號稱0配置,無法直接修改打包文件,那麼怎麼區分不同的線上環境分別傳入不一樣的配置呢?
官網給我們做了簡單介紹(vue-cli-service-build),但只解釋了現有幾個指令所匹配的模式,對於上面的需求顯然無法滿足。
如下提供一種解決方案:
首先在package.json文件內添加測試環境和生產環境的打包指令:
"build-test": "vue-cli-service build --mode alpha",
"build-prod": "vue-cli-service build --mode prod",
在項目根目錄添加兩個文件
.env.alpha
NODE_ENV = 'production'
VUE_APP_BASE_URL = 'http://test.linbenjian.work'
.env.prod
NODE_ENV = 'production'
VUE_APP_BASE_URL = 'http://www.linbenjian.work'
在項目中使用參數:
import axios from 'axios'
let baseurl = process.env.VUE_APP_BASE_URL || 'http://localhost:9001'
注:
—mode後面添加test、production 等預留參數無效
配置文件內,參數添加VUE_APP 可通過調試