修改Vue2項目運行端口號配置后端代理教程
更新時間：2026年01月12日 09:55:06 作者：qq_53154643
文章介紹了在Vue2項目中配置端口號和代理解決跨域問題的方法,包括在vue.config.js文件中增加端口號配置和設(shè)置代理路徑
一.端口號簡單配置
在Vue2項目的vue.config.js文件中增加如下配置：
module.exports={
//...
devServer:{
port:8888//此處修改你需要的端口號
}二.配置proxy代理
1.簡單配置單個代理
請求到/api/xxx現(xiàn)在會被代理到請求 http://localhost:8888/api/xxx
例如 /api/user 現(xiàn)在會被代理到請求 http://localhost:8888/api/user
modile.exports={
//...
devServer:{
proxy:{
'/api':'http://localhost:8888'
}
}
}2.配置多個代理路徑
將多個路徑代理到同一個target下，你可以使用由一個或多個具有context屬性的對象構(gòu)成的數(shù)組：
module.exports = {
//...
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'http://localhost:8888',
}]
}
};3.解決跨域問題
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8888',
changeOrigin: true,//開啟代理：在本地會創(chuàng)建一個虛擬服務(wù)端，然后
//發(fā)送請求的數(shù)據(jù)，并同時接收請求的數(shù)據(jù)，這樣服務(wù)
//端和服務(wù)端進行數(shù)據(jù)的交互就不會有跨域問題
}
}
}
};總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用JSONP主要是目的通過動態(tài)創(chuàng)建Script，動態(tài)拼接url，進而抓取數(shù)據(jù)，實現(xiàn)跨域。這篇文章主要介紹了VUE2.0中Jsonp的使用方法（前端）,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue單個組件實現(xiàn)無限層級多選菜單的相關(guān)資料，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
vue-cli自定義創(chuàng)建項目eslint依賴沖突解決方式
vue-cli是vue.js的腳手架,用于自動生成vue.js+webpack的項目模板,在創(chuàng)建項目時,如果遇到npm安裝報錯,通常是由于依賴版本沖突造成的,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
本篇文章主要介紹了Vue響應(yīng)式原理詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
vue.js 使用v-if v-else發(fā)現(xiàn)沒有執(zhí)行解決辦法
這篇文章主要介紹了vue.js 使用v-if v-else發(fā)現(xiàn)沒有執(zhí)行解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05
解決前端調(diào)用后端接口返回200但數(shù)據(jù)返回的是html標簽
這篇文章主要給大家介紹了關(guān)于如何解決前端調(diào)用后端接口返回200但數(shù)據(jù)返回的是html標簽的相關(guān)資料,文中通過圖文將解決的過程介紹的非常詳細,對同樣遇到這個問題的朋友具有一定的參考解決價值,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了 vue中v-for 循環(huán)對象中的屬性，文章圍繞v-for 循環(huán)對象的相關(guān)資料展開詳細內(nèi)容,需要的朋友可以參考一下，希望對大家有所幫助2021-11-11
這篇文章主要為大家詳細介紹了vue3實現(xiàn)旋轉(zhuǎn)圖片驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue3中watch和watchEffect實戰(zhàn)梳理
這篇文章主要介紹了vue3中watch和watchEffect實戰(zhàn)梳理，watch和watchEffect都是vue3中的監(jiān)聽器，但是在寫法和使用上是有區(qū)別的。下文介紹他們之間的方法及區(qū)別，需要的朋友可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了如何在Vue3中使用jsx/tsx的相關(guān)知識,文中的示例代碼講解詳細,具有一定的借鑒價值,需要的小伙伴可以了解下2024-02-02