解決vue+webpack項(xiàng)目接口跨域出現(xiàn)的問(wèn)題
1、config文件夾下index.js文件設(shè)置proxyTable(proxyTable后面的host可以設(shè)置也可以保持默認(rèn)的localhost)
proxyTable: {
'/api': {
target: 'http://10.xx.xx.xx:8080/renter-server', // 開(kāi)發(fā)環(huán)境
// target: 'http://10.xx.xx.xx:8080/renter-server', // 生產(chǎn)環(huán)境接口
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
host: '自己的IP或者默認(rèn)的localhost', // can be overwritten by process.env.HOST
在使用axios請(qǐng)求的時(shí)候把所有接口的'http://10.xx.xx.xx:8080/renter-server'部分替換為'/api'
例如我們項(xiàng)目里axios的配置文件夾（自定義的）api下面的index.js文件里有如下配置
let env = process.env.NODE_ENV
let BASE_1, BASE_2
if (env === 'production') {// 生產(chǎn)環(huán)境 正式打包使用
BASE_1 = BASE_2 = CONFIG.apiHost
} else if (env === 'development') {// 開(kāi)發(fā)環(huán)境 本地測(cè)試使用
BASE_1 = BASE_2 = '/api'
}
再用BASE1拼接進(jìn)行請(qǐng)求
axios.get(BASE_1 + '/pc/getHouseList', {params: params})
補(bǔ)充知識(shí)：vue打包后404，webpack配置問(wèn)題
首先聲明這是基于vue2.x的
1.
將其中build的配置項(xiàng)assetsPublicPath進(jìn)行修改，改為上圖--》目的是將資源文件的引入路徑，改為相對(duì)地址（相對(duì)index.html）
2.html中的js、css、img引入均沒(méi)有問(wèn)題，
但是css中的background-image還是報(bào)404
此時(shí)的問(wèn)題原因是，使用了相對(duì)地址后，在css進(jìn)行引入的圖片路徑，其相對(duì)的是css文件的路徑
此時(shí)的修改方法是，修改build文件夾中的utils.js文件，增加一行代碼搞定
以上這篇解決vue+webpack項(xiàng)目接口跨域出現(xiàn)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
配置vite.confgi.ts無(wú)法使用require問(wèn)題以及解決
這篇文章主要介紹了配置vite.confgi.ts無(wú)法使用require問(wèn)題以及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue跳轉(zhuǎn)到詳情頁(yè)的兩種實(shí)現(xiàn)方法
最近接觸了vue項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)到詳情頁(yè)的兩種實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06
Vue路由守衛(wèi)及頁(yè)面登錄權(quán)限控制的設(shè)置方法(兩種)
這篇文章主要介紹了Vue路由守衛(wèi)及頁(yè)面登錄權(quán)限控制的設(shè)置方法,本文通過(guò)實(shí)例代碼通過(guò)兩種方法給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
如何解決vue-json-editor無(wú)法輸入中文、重影問(wèn)題
文章介紹了如何解決vue-json-editor組件無(wú)法輸入中文和重影的問(wèn)題,通過(guò)修改源碼并使用vue-json-edit-fix-cn組件來(lái) fix 這兩個(gè)問(wèn)題,同時(shí),文章還提供了如何移除舊的依賴包并安裝新的依賴包的步驟2025-01-01
這篇文章主要介紹了vue2路由中router-view不顯示的原因及踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 音樂(lè)App QQ音樂(lè)搜索列表最新接口跨域設(shè)置方法
這篇文章主要介紹了vue 音樂(lè)App QQ音樂(lè)搜索列表最新接口跨域設(shè)置方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
如何在vue里面優(yōu)雅的解決跨域(路由沖突問(wèn)題)
這篇文章主要介紹了如何在vue里面優(yōu)雅的解決跨域(路由沖突問(wèn)題),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
安裝node.js以及搭建vue項(xiàng)目過(guò)程中遇到的問(wèn)題詳解
為了讓一些不太清楚搭建前端項(xiàng)目的小白,更快上手,下面這篇文章主要給大家介紹了關(guān)于安裝node.js以及搭建vue項(xiàng)目過(guò)程中遇到問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
今天小編就為大家分享一篇Vue動(dòng)態(tài)獲取width的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果(推薦)
這篇文章主要介紹了vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果的實(shí)現(xiàn)代碼，文章包括難點(diǎn)說(shuō)明，介紹的非常詳細(xì)，感興趣的朋友參考下2017-01-01