解決vue-element-admin中配置跨域出現(xiàn)的問(wèn)題

更新時(shí)間：2024年07月24日 15:30:26 作者：曦和百里

這篇文章主要介紹了解決vue-element-admin中配置跨域出現(xiàn)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue-element-admin配置跨域問(wèn)題

首先來(lái)看一下項(xiàng)目結(jié)構(gòu)目錄

我們可以看到.env.development和.env.production文件以及vue.config.js

這里是涉及到了接口的轉(zhuǎn)發(fā)（我們可以看到base，base的意思是所有的請(qǐng)求前綴都會(huì)加上它）

重點(diǎn)來(lái)了（如何配置跨域）

 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：開(kāi)啟跨域
pathRewrite：匹配到所有含有當(dāng)前環(huán)境所對(duì)應(yīng)的前綴的接口進(jìn)行轉(zhuǎn)發(fā)

坑來(lái)了（這真的是留了好大一個(gè)坑，之前查了好久，后來(lái)無(wú)意間解決了）

在.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)前是開(kāi)發(fā)還是生產(chǎn)環(huán)境就好了

更改：

lintOnSave: process.env.NODE_ENV === 'development'

或者：

lintOnSave: process.env.NODE_ENV === 'production'

這處就能夠去自動(dòng)匹配了，之前都是要改好幾個(gè)地方，這樣子顯得比較優(yōu)雅。

原因是沒(méi)有檢索到這個(gè)前綴

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

element中el-table局部刷新的實(shí)現(xiàn)示例
本文主要介紹了element中el-table局部刷新的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue 解決無(wú)法對(duì)未定義的值,空值或基元值設(shè)置反應(yīng)屬性報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了vue 解決無(wú)法對(duì)未定義的值,空值或基元值設(shè)置反應(yīng)屬性報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
vue3中defineEmits與defineProps的用法實(shí)例
這篇文章主要介紹了vue3中defineEmits/defineProps的用法實(shí)例,需要的朋友可以參考下
2023-12-12
Vue3中嵌套路由和編程式路由的實(shí)現(xiàn)
Vue?Router在Vue.js的核心庫(kù)上提供了路由的功能,使得我們可以在單頁(yè)應(yīng)用中實(shí)現(xiàn)頁(yè)面的切換、跳轉(zhuǎn)和參數(shù)傳遞等功能,本文主要介紹了Vue3中嵌套路由和編程式路由的實(shí)現(xiàn),感興趣的可以了解一下
2023-12-12
Vue3?計(jì)算屬性的用法詳解
學(xué)過(guò)?vue2?的寶子們應(yīng)該都清楚，計(jì)算屬性這個(gè)東西在項(xiàng)目開(kāi)發(fā)過(guò)程中使用的還是比較頻繁的，使用頻率相對(duì)來(lái)說(shuō)比較高。本文就來(lái)為大家介紹一下Vue3中計(jì)算屬性的用法，需要的可以參考一下
2022-07-07
Vuex處理用戶Token過(guò)期及優(yōu)化設(shè)置封裝本地存儲(chǔ)操作模塊
這篇文章主要為大家介紹了Vuex處理用戶Token優(yōu)化設(shè)置封裝本地存儲(chǔ)操作模塊及Token?過(guò)期問(wèn)題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vue與iframe之間的信息交互的實(shí)現(xiàn)
這篇文章主要介紹了vue與iframe之間的信息交互的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
vue+axios+mock.js環(huán)境搭建的方法步驟
本篇文章主要介紹了vue+axios+mock.js環(huán)境搭建的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中axios如何捕捉http狀態(tài)碼為401錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue引用public文件夾中文件的多種方式
由于一些演示需要對(duì)一些簡(jiǎn)單頁(yè)面進(jìn)行配置,由于打包build后的vue項(xiàng)目基本已經(jīng)看不出原樣,因此需要?jiǎng)?chuàng)建一個(gè)文件,并在打包的時(shí)候不會(huì)進(jìn)行編譯,所以文件放在public,這篇文章主要給大家介紹了關(guān)于vue引用public文件夾中文件的多種方式,需要的朋友可以參考下
2024-02-02