vue-cli3.0 多環境打包配置


https://blog.csdn.net/qq_37055675/article/details/85047451

 

 

通過不同命令行切換不同環境api等信息,

例如: npm run dev 調用本地環境api

           npm run test 調用測試環境api

           npm run build 調用線上環境api

(1)先在package.json文件中添加:

"test": "vue-cli-service build --mode test"


(2)在項目目錄下建立 .env文件和.env.test文件

 

.env文件

NODE_ENV = 'production'
VUE_APP_FLAG = 'pro'


.env.test文件(outputDir:打包時的輸出目錄名字,若需默認輸出到dist目錄,則可不寫該變量)

NODE_ENV = 'production'
VUE_APP_FLAG = 'test'
outputDir = test


在vue.config.js文件中添加:

outputDir: process.env.outputDir,


(3)在main.js文件中配置api變量

/*第一層if判斷生產環境和開發環境*/
if (process.env.NODE_ENV === 'production') {
/*第二層if,根據.env文件中的VUE_APP_FLAG判斷是生產環境還是測試環境*/
if (process.env.VUE_APP_FLAG === 'pro') {
//production 生產環境
axios.defaults.baseURL = 'http://api.xinggeyun.com';

} else {
//test 測試環境
axios.defaults.baseURL = 'http://192.168.0.152:8102';

}
} else {
//dev 開發環境
axios.defaults.baseURL = 'http://192.168.0.152:8102';
}


npm run test后,即可在目錄文件中看到test文件

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM