Vue-CLI3.x 設(shè)置反向代理的方法
最近在項(xiàng)目中使用了Vue CLI 3.0版本,項(xiàng)目中需要設(shè)置反向代理解決跨域問題,下面記錄一下設(shè)置過程。
如何安裝vue-cli3呢?
首先,你要有一個(gè)nodejs環(huán)境
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一臺(tái)電腦中管理多個(gè) 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,看看是否展示出了一份所有可用命令的幫助信息,來驗(yàn)證它是否安裝成功。(例如 vue --version)
新建配置文件
在項(xiàng)目的根目錄下新建 vue.config.js 文件,自Vue CLI 3開始,項(xiàng)目中所有的配置信息都寫在這個(gè)文件中(2在config目錄中配置)。
配置反向代理
設(shè)置代理
module.exports = { devServer: { // 設(shè)置代理 proxy: { "/v1": { target: "http://127.0.0.1:8081/", // 域名 ws: true, // 是否啟用websockets changOrigin: true, //開啟代理:在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端,然后發(fā)送請(qǐng)求的數(shù)據(jù),并同時(shí)接收請(qǐng)求的數(shù)據(jù),這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問題 pathRequiresRewrite: { "^/v1": "/" } } } } };
在請(qǐng)求中使用
// '/v1'等于'http://127.0.0.1:8081/v1' // 此時(shí)請(qǐng)求地址為'http://127.0.0.1:8081/v1/picture?method=upload' get('/v1/picture?method=upload')
更多
更多內(nèi)容請(qǐng)參考Vue CLI官方文檔https://cli.vuejs.org/zh/config/#devserver-proxy
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue router-link 默認(rèn)a標(biāo)簽去除下劃線的實(shí)現(xiàn)
這篇文章主要介紹了vue router-link 默認(rèn)a標(biāo)簽去除下劃線的實(shí)現(xiàn)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue項(xiàng)目使用定時(shí)器每隔幾秒運(yùn)行一次某方法代碼實(shí)例
有時(shí)候在項(xiàng)目中我們經(jīng)常需要設(shè)置簡單的倒計(jì)時(shí)功能,這個(gè)可以通過定時(shí)器來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用定時(shí)器每隔幾秒運(yùn)行一次某方法的相關(guān)資料,需要的朋友可以參考下2023-04-04vue的axios使用post時(shí)必須使用qs.stringify而get不用問題
這篇文章主要介紹了vue的axios使用post時(shí)必須使用qs.stringify而get不用問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01vue項(xiàng)目部署到Apache服務(wù)器中遇到的問題解決
這篇文章主要介紹了vue項(xiàng)目部署到Apache中遇到的問題解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08vue移動(dòng)端實(shí)現(xiàn)手機(jī)左右滑動(dòng)入場動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端實(shí)現(xiàn)手機(jī)左右滑動(dòng)入場動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08Ant?Design?of?Vue的樹形控件Tree的使用及說明
這篇文章主要介紹了Ant?Design?of?Vue的樹形控件Tree的使用及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue 動(dòng)態(tài)設(shè)置路由參數(shù)的案例分析
這篇文章主要介紹了Vue 動(dòng)態(tài)設(shè)置路由參數(shù)的案例分析,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04