Vue-CLI3.x 設(shè)置反向代理的方法
最近在項目中使用了Vue CLI 3.0版本，項目中需要設(shè)置反向代理解決跨域問題，下面記錄一下設(shè)置過程。
如何安裝vue-cli3呢？
首先，你要有一個nodejs環(huán)境
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一臺電腦中管理多個 Node 版本。
其次，如果你之前安裝了vue-cli的舊版本，那么你要做如下操作
關(guān)于舊版本
Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經(jīng)全局安裝了舊版本的 vue-cli(1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。
假設(shè)你已有了nodejs環(huán)境，你可以通過下面指令安裝vue-cli3的包
npm install -g @vue/cli # OR yarn global add @vue/cli
安裝之后，你就可以在命令行中訪問 vue 命令。你可以通過簡單運(yùn)行 vue，看看是否展示出了一份所有可用命令的幫助信息，來驗證它是否安裝成功。（例如 vue --version）
新建配置文件
在項目的根目錄下新建 vue.config.js 文件，自Vue CLI 3開始，項目中所有的配置信息都寫在這個文件中（2在config目錄中配置）。
配置反向代理
設(shè)置代理
module.exports = {
devServer: {
// 設(shè)置代理
proxy: {
"/v1": {
target: "http://127.0.0.1:8081/", // 域名
ws: true, // 是否啟用websockets
changOrigin: true, //開啟代理：在本地會創(chuàng)建一個虛擬服務(wù)端，然后發(fā)送請求的數(shù)據(jù)，并同時接收請求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會有跨域問題
pathRequiresRewrite: {
"^/v1": "/"
}
}
}
}
};
在請求中使用
// '/v1'等于'http://127.0.0.1:8081/v1'
// 此時請求地址為'http://127.0.0.1:8081/v1/picture?method=upload'
get('/v1/picture?method=upload')
更多
更多內(nèi)容請參考Vue CLI官方文檔https://cli.vuejs.org/zh/config/#devserver-proxy
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
前端啟動出現(xiàn)報錯提示vue-cli-service?serve的原因及解決辦法
這篇文章主要給大家介紹了關(guān)于前端啟動出現(xiàn)報錯提示vue-cli-service?serve的原因及解決辦法,文中通過圖文以及實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
在Vue中使用deep深度選擇器修改element UI組件的樣式
這篇文章主要介紹了在Vue中使用deep深度選擇器修改element UI組件的樣式，本文分為兩種方法給大家介紹，在這小編比較推薦使用第二種使用 deep 深度選擇器，感興趣的朋友跟隨小編一起看看吧2022-12-12
vue-element-admin 菜單標(biāo)簽失效的解決方式
今天小編就為大家分享一篇vue-element-admin 菜單標(biāo)簽失效的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了讓Vue也可以使用Redux的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue swipeCell滑動單元格(仿微信)的實現(xiàn)示例
這篇文章主要介紹了vue swipeCell滑動單元格(仿微信)的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了vue百度地圖 + 定位的詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue Echarts實現(xiàn)圖表輪播圖以及圖表組件封裝和節(jié)流函數(shù)優(yōu)化講解
這篇文章主要介紹了在Vue中優(yōu)雅的使用Echarts實現(xiàn)圖表輪播圖、Echarts圖表組件封裝、節(jié)流函數(shù)優(yōu)化圖表性能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)純前端表格滾動分頁加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
關(guān)于Vue-extend和VueComponent問題小結(jié)
這篇文章主要介紹了Vue-extend和VueComponent問題,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
相信大家都知道在element-ui中,el-upload可以進(jìn)行文件多選操作,下面這篇文章主要給大家介紹了關(guān)于Vue使用el-upload批量上傳圖片時報錯問題的處理方法,文中通過圖文以及實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06