解決vue-element-admin中配置跨域出現(xiàn)的問題
更新時(shí)間：2024年07月24日 15:30:26 作者：曦和百里
這篇文章主要介紹了解決vue-element-admin中配置跨域出現(xiàn)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue-element-admin配置跨域問題
首先來看一下項(xiàng)目結(jié)構(gòu)目錄
我們可以看到.env.development和.env.production文件以及vue.config.js
這里是涉及到了接口的轉(zhuǎn)發(fā)（我們可以看到base，base的意思是所有的請(qǐng)求前綴都會(huì)加上它）
重點(diǎn)來了（如何配置跨域）
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: 'http://127.0.0.1:3000/',
ws: true,
changeOrigin: true,
pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' }
}
}
target：是我要跨域的地址。changeOrigin：開啟跨域pathRewrite：匹配到所有含有當(dāng)前環(huán)境所對(duì)應(yīng)的前綴的接口進(jìn)行轉(zhuǎn)發(fā)
坑來了（這真的是留了好大一個(gè)坑，之前查了好久，后來無意間解決了）
在.env.development和.env.production文件中
如果你的#base api和VUE_APP_BASE_API=api
這兩個(gè)地方不對(duì)應(yīng)的話，那么你就不能夠?qū)崿F(xiàn)我所截圖的跨域配置，我之前的配置的都是手動(dòng)去改，這個(gè)坑解決了之后何其優(yōu)雅，只需要更改當(dāng)前是開發(fā)還是生產(chǎn)環(huán)境就好了
- 更改：
lintOnSave: process.env.NODE_ENV === 'development'
- 或者：
lintOnSave: process.env.NODE_ENV === 'production'
這處就能夠去自動(dòng)匹配了，之前都是要改好幾個(gè)地方，這樣子顯得比較優(yōu)雅。
原因是沒有檢索到這個(gè)前綴
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
一個(gè)vue組件庫(kù)發(fā)布到npm的完整實(shí)現(xiàn)過程
工作的時(shí)候總是使用別人的npm包,然而我有時(shí)心底會(huì)好奇自己如何發(fā)布一個(gè)npm包呢,什么時(shí)候自己的包能夠被很多人喜歡并使用呢,下面這篇文章主要給大家介紹了關(guān)于一個(gè)vue組件庫(kù)發(fā)布到npm的相關(guān)資料,需要的朋友可以參考下2022-03-03
這篇文章給大家詳細(xì)介紹了Vue強(qiáng)制組件重新渲染的正確方法,非常的實(shí)用,有需要的小伙伴可以參考下2020-02-02
本篇文章主要介紹了Vue.js中兄弟組件之間互相傳值實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家介紹了input組合事件如何監(jiān)聽輸入中文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
typescript不僅可以約束我們的編碼習(xí)慣，還能起到注釋的作用，當(dāng)我們看到一函數(shù)后我們立馬就能知道這個(gè)函數(shù)的用法。這篇文章主要介紹了在Vue組件中使用 TypeScript的方法,需要的朋友可以參考下2018-02-02
el-table樹形數(shù)據(jù)量過大,導(dǎo)致頁(yè)面卡頓問題及解決
這篇文章主要介紹了el-table樹形數(shù)據(jù)量過大,導(dǎo)致頁(yè)面卡頓問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue引入jquery時(shí)報(bào)錯(cuò) $ is not defined的問題及解決
這篇文章主要介紹了vue引入jquery時(shí)報(bào)錯(cuò) $ is not defined的問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-09-09
vue3+elementPlus二次封裝表單的實(shí)現(xiàn)代碼
最近使用Vue3+ElementPlus開發(fā)項(xiàng)目，從整體上構(gòu)思組件的封裝。能寫成組件的內(nèi)容都進(jìn)行封裝，方便多個(gè)地方使用，這篇文章給大家介紹了vue3+elementPlus二次封裝表單的實(shí)現(xiàn)，并通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
vuejs手把手教你寫一個(gè)完整的購(gòu)物車實(shí)例代碼
這篇文章主要介紹了vuejs-手把手教你寫一個(gè)完整的購(gòu)物車實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
利用vue實(shí)現(xiàn)打印頁(yè)面的幾種方法總結(jié)
在項(xiàng)目里有個(gè)打印功能,將頁(yè)面的部分內(nèi)容打印出來,所以下面這篇文章主要給大家介紹了關(guān)于利用vue實(shí)現(xiàn)打印頁(yè)面的幾種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11