vue-cli3設(shè)置代理無效的解決
vue-cli3設(shè)置代理無效
閑著無聊使用vue-cli3.0搭建了項目，在配置代理后運行的時候出現(xiàn)了如下情況：
但是這個接口直接拿地址拼接是能取數(shù)據(jù)的，如下（不好意思部分?jǐn)?shù)據(jù)必須要隱藏哈）：
以下是我的vue.config.js,代理配置：
錯誤原因
pathRewrite中'^/api':’api‘i問題 // 冒號后面的api意思是用‘/api’代替target里面的地址，后面組件中我們掉接口時直接用api代替，改為如下：
運行項目 npm run serve,
問題解決
vue cli3 代理跨域 404（失?。﹩栴}
情景
在寫vue cli 中的代理時，百度了好久也沒代理上，最終的問題出在路徑重寫上。如果有跟我有一樣問題的小伙伴，歡迎前來參考，可根據(jù)各自情況和實際問題進(jìn)行調(diào)試。
接口地址
代理地址為（開發(fā)環(huán)境）
// .env.development 文件中
VUE_APP_BASE_API 在不同環(huán)境（ .env.production文件， .env.staging等文件中）為不同地址。
如沒有此處，代理地址寫死的話，下面的proxy中也要將對應(yīng)代理地址改掉。
如：part2中。
注意：百度上搜的重新路徑都是 ‘’ (空路徑），一直代理不過去。找了半天發(fā)現(xiàn)需要代理到 '/' （根路徑）。卡了好久，距離就差了這一點點問題（啊 啊啊啊 啊?。?。
*此處需要根據(jù)自己的接口狀況來調(diào)試代理路徑地址
瀏覽器中接口requestURL顯示
response中已返回數(shù)據(jù)
（part2）不需動態(tài)改變proxy需代理的路徑（即：下圖 'api' 位置處）
//vue.config.js 文件中
將地址中 '/api' 代理到 '/' 中.
輸出為：
http://127.0.0.1:8080/userInfo/getUserInfoList.do
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue 表單綁定與組件的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue學(xué)習(xí)筆記之Vue中css動畫原理簡單示例
這篇文章主要介紹了vue學(xué)習(xí)筆記之Vue中css動畫原理,結(jié)合簡單實例形式分析了Vue中css樣式變換動畫效果實現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
基于vue實現(xiàn)多引擎搜索及關(guān)鍵字提示
這篇文章主要為大家詳細(xì)介紹了基于vue實現(xiàn)多引擎搜索及關(guān)鍵字提示的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue踩坑記錄:屬性報undefined錯誤問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
下面小編就為大家分享一篇vue項目中使用ueditor的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
解決vue項目F5刷新mounted里的函數(shù)不執(zhí)行問題
今天小編就為大家分享一篇解決vue項目F5刷新mounted里的函數(shù)不執(zhí)行問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue監(jiān)聽input標(biāo)簽的value值方法
今天小編就為大家分享一篇vue監(jiān)聽input標(biāo)簽的value值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析
這篇文章主要介紹了關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue3監(jiān)聽resize窗口事件(離開頁面要銷毀窗口事件)
這篇文章主要給大家介紹了關(guān)于vue3監(jiān)聽resize窗口事件(離開頁面要銷毀窗口事件)的相關(guān)資料,vue是單頁面應(yīng)用,路由切換后,定時器并不會自動關(guān)閉,需要手動清除,當(dāng)頁面被銷毀時,清除定時器即可,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue使用openlayers實現(xiàn)移動點動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09