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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue2.0 使用element-ui里的upload組件實現(xiàn)圖片預覽效果方法
今天小編就為大家分享一篇vue2.0 使用element-ui里的upload組件實現(xiàn)圖片預覽效果方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)分頁的三種效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue2.x對象單層劫持的原理實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
ElementUI 是一套ui組件庫，目前最新版本 react 和 vue 等主流框架都有支持。該庫默認主題色是天藍色，若用于項目開發(fā)，難免遇到要需求修改其默認樣式的情況，這篇文章主要介紹了ElementUI如何修改el-cascader的默認樣式,需要的朋友可以參考下2023-12-12
vue.js相比于Angular.js，Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。下面通過本文給大家分享vue.js語法及常用指令，希望對大家有所幫助2017-10-10
在Vue?3中使用OpenLayers加載GPX數(shù)據(jù)并顯示圖形效果
本文介紹了如何在Vue 3中使用OpenLayers加載GPX格式的數(shù)據(jù)并在地圖上顯示圖形,通過使用OpenLayers的GPX解析器,我們能夠輕松地處理和展示來自GPS設備的地理數(shù)據(jù),需要的朋友可以參考下2024-12-12
vue項目中在可編輯div光標位置插入內容的實現(xiàn)代碼
這篇文章主要介紹了vue項目中在可編輯div光標位置插入內容的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了axios+Vue上傳文件顯示進度效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
在vue中,v-for的索引index在html中的使用方法
下面小編就為大家分享一篇在vue中,v-for的索引index在html中的使用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了Vue的過濾器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02