在Vue開發(fā)當中經(jīng)常會遇到各種各樣的接口問題,最近在項目中遇到開發(fā)和線上環(huán)境接口路徑不一樣的問題,網(wǎng)上找到很多博客,大多都是千篇一律的復制粘貼,對于新手來說可能比較難以理解,所以我寫這篇博客分享給剛使用vue做項目的小萌新同學一個詳細的接口配置思路酒来。
webpack提供了生產(chǎn)環(huán)境和線上環(huán)境的兩種配置文件,平時開發(fā)當中使用一個接口,項目上線后就會自動切換成另外一個接口,廢話不多說,下面上圖式镐。首先是找到vue-cli項目中config文件夾下的dev.env.js,默認是下面的樣子:
然后我們需要添加開發(fā)環(huán)境中使用的請求后臺數(shù)據(jù)的接口域名,如下圖:
url_api是我自己設置的,可以自定義床玻。后面的路徑就是你自己開發(fā)環(huán)境中的接口赏陵。
接著找到prod.env.js,默認如下圖:
在這個文件中同樣添加線上請求接口的配置:
最后在自己封裝的axios中去調用這個接口:
自定義變量 = process.env.url_api(這個就是剛才在config兩個文件中自定義的),拼接url到封裝的axios中仲智。最后在生產(chǎn)環(huán)境中npm run dev 的時候會自動調用剛才在dev.env.js中定義的接口,當使用npm run build 去打包的時候會自動調用prod.env.js中配置的接口买乃。
另外:跨域的問題
? ? ?可能有些小伙伴在vue中配置了跨域的代理,所以導致拼接url中proxy代理失效,依然出現(xiàn)跨域的問題,解決這個問題我的個人思路是代理配置不變,只需要在dev.env.js中用空字符串替換本地接口。就不會出現(xiàn)開發(fā)環(huán)境中跨域的問題了钓辆。有不明白的可以問我,有更好的方案也希望能不吝賜教,謝謝剪验。
作者：蘇濘
鏈接：http://www.reibang.com/p/6393cf897663
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯(lián)系作者獲得授權并注明出處前联。
