Vue webpack 打包Vue項目后動態配置API接口地址及配置文件


大家一般配置的Vue項目webapi的服務器地址都在config中的prod.dev.js中極不方便,如果要發布多個不同端口及ip的服務器項目,每次都得打包重新修改發布,最近剛好碰到這類問題就查閱資料,結合其他人的心得,自己嘗試了一下。

主要有一下幾個步驟:

1. 首先在static目錄下創建一個config.js文件

 

里面添加服務器ip及端口地址 window.g是一個全局變量

 

 

2. 在index.html中添加引入此js

 

 

3. 然后在接口攔截器那邊去設置和使用ip及端口地址  將原來的url替換為window.g.BASE_URL 

 

 

 

4.測試 在首頁加載頁面中添加打印變量 console.log(window.g.BSAE_URL) 發現可以打印出來 測試成功!

5. 發布 運行 npm  run build  發現打包后的dist/static文件夾中多出了一個config.js  之后就可以更改config.js中的端口及ip地址來進行不同的服務器發布了 其實利用了webpack打包的時候/static/目錄不會被webpack打包,所以直接才可以配置使用


免責聲明!

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



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