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