vite/Vuecli配置proxy代理解決跨域問(wèn)題
更新時(shí)間：2023年12月29日 08:54:22 作者：williamyi74
這篇文章主要介紹了vite/Vuecli配置proxy代理解決跨域問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vite/Vuecli配置proxy代理解決跨域
上代碼
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
server: {
port: 9090,
strictPort: true, // 嚴(yán)格端口 true:如果端口已被使用，則直接退出，而不會(huì)再進(jìn)行后續(xù)端口的嘗試。
/**
* @description 解決chrome設(shè)置origin:*也跨域機(jī)制,代理/api前綴到服務(wù)基地址
* 最終的地址會(huì)將axios設(shè)置的baseUrl:/dev代理拼接成[target][/dev][/xxx/yyy]
*/
proxy: {
'/dev': {
target: 'http://www.baidu.com', // 接口基地址
rewrite: path => {
console.log(path); // 打印[/dev/xxx/yyy] 這就是http-proxy要請(qǐng)求的url,如果服務(wù)器真實(shí)地址是沒(méi)有/dev前綴的話要replace掉,如果有可以不replace
return path.replace(/^\/dev/, '');
}
}
}
},
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, '.', 'src') // 設(shè)置 @ 指向 src
}
},
})Vuecli配置
devServer: {
port: '9090',
proxy: {
[process.env.VUE_APP_PREFIX]: {
target: process.env.VUE_APP_BASEURL,
secure: true,
changeOrigin: true,
pathRewrite: {
[`^${process.env.VUE_APP_PREFIX}`]: '',
},
},
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
文章介紹了JavaScript中的Map對(duì)象及其相關(guān)方法,包括設(shè)置和獲取值、判斷鍵是否存在、清空Map、刪除指定元素和使用forEach方法遍歷,此外,文章還對(duì)比了Map和對(duì)象在鍵類型和順序上的區(qū)別2025-11-11
Vue.js 是一款流行的前端框架,它提供了一些方便的機(jī)制來(lái)管理組件之間的通信,其中包括組件傳值,本文將詳細(xì)介紹 Vue.js 中的組件傳值機(jī)制,包括父子組件傳值、兄弟組件傳值、跨級(jí)組件傳值等多種方式,需要的朋友可以參考下2023-08-08
vue3實(shí)現(xiàn)對(duì)自定義組件自由拖動(dòng)效果
在數(shù)據(jù)可視化看板開(kāi)發(fā)中,組件的自由拖拽功能能極大提升交互體驗(yàn),本文將基于Vue3生態(tài),從零開(kāi)始解析如何實(shí)現(xiàn)一個(gè)支持自由拖拽的容器組件,感興趣的朋友一起看看吧2025-04-04
el-popover如何通過(guò)js手動(dòng)控制彈出框顯示、隱藏
最近項(xiàng)目中多次用到了Popover彈出框,下面這篇文章主要給大家介紹了關(guān)于el-popover如何通過(guò)js手動(dòng)控制彈出框顯示、隱藏的相關(guān)資料,需要的朋友可以參考下2023-12-12
vue3.0實(shí)現(xiàn)復(fù)選框組件的封裝
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)復(fù)選框組件的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue中的數(shù)據(jù)驅(qū)動(dòng)解釋
這篇文章主要為大家介紹了Vue中的數(shù)據(jù)驅(qū)動(dòng)解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
vue router學(xué)習(xí)之動(dòng)態(tài)路由和嵌套路由詳解
本篇文章主要介紹了vue router 動(dòng)態(tài)路由和嵌套路由，詳細(xì)的介紹了動(dòng)態(tài)路由和嵌套路由的使用方法，有興趣的可以了解一下2017-09-09
虛擬列表是一種優(yōu)化長(zhǎng)列表渲染的技術(shù),它可以在保持流暢性的同時(shí),渲染大量的數(shù)據(jù),本文主要介紹了如何通過(guò)Vue3實(shí)現(xiàn)一個(gè)虛擬列表,感興趣的可以了解下2024-11-11
vue?禁止重復(fù)點(diǎn)擊發(fā)送多次請(qǐng)求的實(shí)現(xiàn)
本文主要介紹了vue?禁止重復(fù)點(diǎn)擊發(fā)送多次請(qǐng)求的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
Vue3的definePros和defineEmits使用及說(shuō)明
Vue3中的defineProps和defineEmits是組合式API的一部分,用于定義組件的props和事件,defineProps簡(jiǎn)化了props的定義和類型安全,而defineEmits則用于聲明和觸發(fā)組件的自定義事件,確保事件名稱的類型安全2025-10-10