webpack提供了生產環境和線上環境的兩種配置文件,平時開發當中使用壹個接口,項目上線後就會自動切換成另外壹個接口,廢話不多說,下面上圖。首先是找到vue-cli項目中config文件夾下的dev.env.js,默認是下面的樣子:
然後我們需要添加開發環境中使用的請求後臺數據的接口域名,如下圖:
url_api是我自己設置的,可以自定義。後面的路徑就是妳自己開發環境中的接口。
接著找到prod.env.js,默認如下圖:
在這個文件中同樣添加線上請求接口的配置:
最後在自己封裝的axios中去調用這個接口:
自定義變量 = process.env.url_api(這個就是剛才在config兩個文件中自定義的),拼接url到封裝的axios中。最後在生產環境中npm run dev 的時候會自動調用剛才在dev.env.js中定義的接口,當使用npm run build 去打包的時候會自動調用prod.env.js中配置的接口。
另外:跨域的問題
?可能有些小夥伴在vue中配置了跨域的代理,所以導致拼接url中proxy代理失效,依然出現跨域的問題,解決這個問題我的個人思路是代理配置不變,只需要在dev.env.js中用空字符串替換本地接口。就不會出現開發環境中跨域的問題了。有不明白的可以問我,有更好的方案也希望能不吝賜教,謝謝。
鏈接：/p/6393cf897663