在vue3.0中如何配置代理
更新時(shí)間：2023年04月17日 08:50:24 作者：前端華仔
這篇文章主要介紹了在vue3.0中如何配置代理問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue3.0如何配置代理
在根目錄下新建文件 vue.config.js內(nèi)容如下：
module.exports = {
devServer: {
// 配置服務(wù)器代理
proxy: {
"/api": { // 代理接口前綴為/apis的請(qǐng)求
"target": 'http://localhost:3000/', // 對(duì)應(yīng)的代理地址
"secure": false, // 接受運(yùn)行在https上，默認(rèn)不接受
"changeOrigin": true, // 如果設(shè)置為true,那么本地會(huì)虛擬一個(gè)服務(wù)器接收你的請(qǐng)求并代你發(fā)送該請(qǐng)求，這樣就不會(huì)有跨域問(wèn)題（只適合開(kāi)發(fā)環(huán)境）
"pathRewrite": { //重寫(xiě)路徑 比如'/apis/aaa/ccc'重寫(xiě)為'/aaa/ccc'
'^/api': ''
}
},
// 配置多個(gè)代理
"/service": {
"target": 'https://www.google.com/',
"secure": false,
"changeOrigin": true,
},
}
},
}vue3.0配置代理的兩種方式
很多人如果換一個(gè)時(shí)間認(rèn)識(shí)，就會(huì)有不同的結(jié)局。
第一種
proxy: {
'/apis': {
target: 'https://xxxxxxx.com/', // target host
ws: true, // proxy websockets
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
'^/apis': '' // rewrite path
}
},
}
將項(xiàng)目里面的這個(gè)地方改為空就OK
第二種
通過(guò).env 文件
注意: 可以看這篇文章這里
VUE_APP_是規(guī)定的命名格式
然后通過(guò)獲取環(huán)境變量配置就OK!!
俺已經(jīng)試過(guò)了, 是OK的!!!
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Spring Boot/VUE中路由傳遞參數(shù)的實(shí)現(xiàn)代碼
在路由時(shí)傳遞參數(shù)，一般有兩種形式，一種是拼接在url地址中，另一種是查詢(xún)參數(shù)。這篇文章主要介紹了Spring Boot/VUE中路由傳遞參數(shù),需要的朋友可以參考下2018-03-03
這篇文章主要介紹了Vue中Pinia狀態(tài)管理，Pinia開(kāi)始于大概2019年，其目的是設(shè)計(jì)一個(gè)擁有 組合式 API 的 Vue 狀態(tài)管理庫(kù)，Pinia本質(zhì)上依然是一個(gè)狀態(tài)管理庫(kù)，用于跨組件、頁(yè)面進(jìn)行狀態(tài)共享，感興趣的同學(xué)可以參考閱讀2023-04-04
在項(xiàng)目開(kāi)發(fā)過(guò)程中,我們經(jīng)常會(huì)用到svg矢量圖,本文主要介紹了vue3中引入svg矢量圖的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
使用 vue 實(shí)現(xiàn)滅霸打響指英雄消失的效果附demo
這篇文章主要介紹了使用 vue 實(shí)現(xiàn)滅霸打響指英雄消失的效果 demo,需要的朋友可以參考下2019-05-05
vue3 Vite 進(jìn)階rollup命令行使用詳解
這篇文章主要介紹了vue3 Vite 進(jìn)階rollup命令行使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue element 中的table動(dòng)態(tài)渲染實(shí)現(xiàn)（動(dòng)態(tài)表頭）
這篇文章主要介紹了vue element 中的table動(dòng)態(tài)渲染實(shí)現(xiàn)（動(dòng)態(tài)表頭），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
給大家講解一下vue組件發(fā)布到npm簡(jiǎn)單方法和步驟過(guò)程，需要的朋友一起學(xué)習(xí)參考一下。2017-11-11
關(guān)于在Vue中import和require的用法分析
在Vue項(xiàng)目中，我們經(jīng)常需要引入外部的模塊或文件，這時(shí)候就會(huì)用到import和require這兩個(gè)關(guān)鍵字，本文將詳細(xì)分析它們的用法，并提供具體的代碼實(shí)例和解釋,需要的朋友可以參考下2023-06-06
使用vscode格式化文檔無(wú)效的解決辦法(vue代碼格式化文檔無(wú)效)
這篇文章主要給大家介紹了關(guān)于使用vscode格式化文檔無(wú)效的解決辦法,也就是vue代碼格式化文檔無(wú)效,這是最近突然遇到的一個(gè)問(wèn)題,這里給大家介紹一下解決的辦法,需要的朋友可以參考下2023-08-08
在elementui中Notification組件添加點(diǎn)擊事件實(shí)例
這篇文章主要介紹了在elementui中Notification組件添加點(diǎn)擊事件實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11