在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)文章
Spring Boot/VUE中路由傳遞參數(shù)的實現(xiàn)代碼
在路由時傳遞參數(shù)，一般有兩種形式，一種是拼接在url地址中，另一種是查詢參數(shù)。這篇文章主要介紹了Spring Boot/VUE中路由傳遞參數(shù),需要的朋友可以參考下2018-03-03
這篇文章主要介紹了Vue中Pinia狀態(tài)管理，Pinia開始于大概2019年，其目的是設(shè)計一個擁有 組合式 API 的 Vue 狀態(tài)管理庫，Pinia本質(zhì)上依然是一個狀態(tài)管理庫，用于跨組件、頁面進行狀態(tài)共享，感興趣的同學(xué)可以參考閱讀2023-04-04
在項目開發(fā)過程中,我們經(jīng)常會用到svg矢量圖,本文主要介紹了vue3中引入svg矢量圖的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-11-11
使用 vue 實現(xiàn)滅霸打響指英雄消失的效果附demo
這篇文章主要介紹了使用 vue 實現(xiàn)滅霸打響指英雄消失的效果 demo,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue3 Vite 進階rollup命令行使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
vue element 中的table動態(tài)渲染實現(xiàn)（動態(tài)表頭）
這篇文章主要介紹了vue element 中的table動態(tài)渲染實現(xiàn)（動態(tài)表頭），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
給大家講解一下vue組件發(fā)布到npm簡單方法和步驟過程，需要的朋友一起學(xué)習(xí)參考一下。2017-11-11
關(guān)于在Vue中import和require的用法分析
在Vue項目中，我們經(jīng)常需要引入外部的模塊或文件，這時候就會用到import和require這兩個關(guān)鍵字，本文將詳細(xì)分析它們的用法，并提供具體的代碼實例和解釋,需要的朋友可以參考下2023-06-06
使用vscode格式化文檔無效的解決辦法(vue代碼格式化文檔無效)
這篇文章主要給大家介紹了關(guān)于使用vscode格式化文檔無效的解決辦法,也就是vue代碼格式化文檔無效,這是最近突然遇到的一個問題,這里給大家介紹一下解決的辦法,需要的朋友可以參考下2023-08-08
在elementui中Notification組件添加點擊事件實例
這篇文章主要介紹了在elementui中Notification組件添加點擊事件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11