在vue3.0中如何配置代理
更新時間：2023年04月17日 08:50:24 作者：前端華仔
這篇文章主要介紹了在vue3.0中如何配置代理問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue3.0如何配置代理
在根目錄下新建文件 vue.config.js內(nèi)容如下：
module.exports = {
devServer: {
// 配置服務(wù)器代理
proxy: {
"/api": { // 代理接口前綴為/apis的請求
"target": 'http://localhost:3000/', // 對應(yīng)的代理地址
"secure": false, // 接受運行在https上，默認(rèn)不接受
"changeOrigin": true, // 如果設(shè)置為true,那么本地會虛擬一個服務(wù)器接收你的請求并代你發(fā)送該請求，這樣就不會有跨域問題（只適合開發(fā)環(huán)境）
"pathRewrite": { //重寫路徑 比如'/apis/aaa/ccc'重寫為'/aaa/ccc'
'^/api': ''
}
},
// 配置多個代理
"/service": {
"target": 'https://www.google.com/',
"secure": false,
"changeOrigin": true,
},
}
},
}vue3.0配置代理的兩種方式
很多人如果換一個時間認(rèn)識，就會有不同的結(jié)局。
第一種
proxy: {
'/apis': {
target: 'https://xxxxxxx.com/', // target host
ws: true, // proxy websockets
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
'^/apis': '' // rewrite path
}
},
}
將項目里面的這個地方改為空就OK
第二種
通過.env 文件
注意: 可以看這篇文章這里
VUE_APP_是規(guī)定的命名格式
然后通過獲取環(huán)境變量配置就OK!!
俺已經(jīng)試過了, 是OK的!!!
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3如何直接修改reactive定義的變量問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue+Express實現(xiàn)登錄狀態(tài)權(quán)限驗證的示例代碼
這篇文章主要介紹了Vue+Express實現(xiàn)登錄狀態(tài)權(quán)限驗證的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
使用vue-router切換頁面時實現(xiàn)設(shè)置過渡動畫
今天小編就為大家分享一篇使用vue-router切換頁面時實現(xiàn)設(shè)置過渡動畫。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了Vue3哈希模式實現(xiàn)錨點導(dǎo)航方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue.js 是一個漸進(jìn)式框架,用于構(gòu)建用戶界面,在開發(fā)過程中,我們經(jīng)常需要根據(jù)不同的條件動態(tài)顯示組件,在本文中,我將詳細(xì)介紹如何實現(xiàn)Vue組件的動態(tài)綁定,提供示例代碼,以幫助你更深入地理解這個概念,需要的朋友可以參考下2024-11-11
本文通過基本實例給大家介紹了vue計算屬性和監(jiān)聽器的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
隨著 Vite2 的發(fā)布并日趨穩(wěn)定，現(xiàn)在越來越多的項目開始嘗試使用它。本文我們就介紹了Vite創(chuàng)建項目的實現(xiàn)步驟，感興趣的可以了解一下2021-07-07
vue實現(xiàn)鼠標(biāo)滑動預(yù)覽視頻封面組件示例詳解
這篇文章主要為大家介紹了vue實現(xiàn)鼠標(biāo)滑動預(yù)覽視頻封面組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue mintui-Loadmore結(jié)合實現(xiàn)下拉刷新和上拉加載示例
本篇文章主要介紹了vue mintui-Loadmore結(jié)合實現(xiàn)下拉刷新和上拉加載示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
vue+canvas實現(xiàn)炫酷時鐘效果的倒計時插件（已發(fā)布到npm的vue2插件，開箱即用）
這篇文章主要介紹了vue+canvas實現(xiàn)炫酷時鐘效果的倒計時插件（已發(fā)布到npm的vue2插件，開箱即用） ,需要的朋友可以參考下2018-11-11