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