解決vue+webpack項目接口跨域出現(xiàn)的問題
更新時間：2020年08月10日 10:54:23 作者：辣姐什么鬼
這篇文章主要介紹了解決vue+webpack項目接口跨域出現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1、config文件夾下index.js文件設(shè)置proxyTable(proxyTable后面的host可以設(shè)置也可以保持默認(rèn)的localhost)
proxyTable: {
'/api': {
target: 'http://10.xx.xx.xx:8080/renter-server', // 開發(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請求的時候把所有接口的'http://10.xx.xx.xx:8080/renter-server'部分替換為'/api'
例如我們項目里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') {// 開發(fā)環(huán)境 本地測試使用
BASE_1 = BASE_2 = '/api'
}
再用BASE1拼接進行請求
axios.get(BASE_1 + '/pc/getHouseList', {params: params})
補充知識：vue打包后404，webpack配置問題
首先聲明這是基于vue2.x的
1.
將其中build的配置項assetsPublicPath進行修改，改為上圖--》目的是將資源文件的引入路徑，改為相對地址（相對index.html）
2.html中的js、css、img引入均沒有問題，
但是css中的background-image還是報404
此時的問題原因是，使用了相對地址后，在css進行引入的圖片路徑，其相對的是css文件的路徑
此時的修改方法是，修改build文件夾中的utils.js文件，增加一行代碼搞定
以上這篇解決vue+webpack項目接口跨域出現(xiàn)的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue用elementui寫form表單時,在label里添加空格操作
這篇文章主要介紹了vue用elementui寫form表單時,在label里添加空格操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue多頁面配置打包性能優(yōu)化方式(解決加載包太大加載慢問題)
這篇文章主要介紹了Vue多頁面配置打包性能優(yōu)化方式(解決加載包太大加載慢問題)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue使用WEB自帶TTS實現(xiàn)語音文字互轉(zhuǎn)的操作方法
這篇文章主要介紹了vue使用WEB自帶TTS實現(xiàn)語音文字互轉(zhuǎn),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要介紹了vue中的select綁定多個值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要給大家介紹了關(guān)于vue.js整合vux中上拉加載下拉刷新的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3自定義實現(xiàn)一個類似el-input的組件,可以v-model雙向綁定,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
使用vite構(gòu)建vue3項目的實現(xiàn)步驟
通過本文,您可以了解如何使用Vue CLI創(chuàng)建Vue 3項目,配置Vite,利用其優(yōu)勢進行開發(fā),具有一定的參考價值,感興趣的可以了解一下2023-08-08
這篇文章主要介紹了vue3項目啟動自動打開瀏覽器以及server配置過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了使用vue-cli3打包dist路徑問題修改打包配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue snippets插件原理與使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10