Vue-CLI3.x 設(shè)置反向代理的方法
最近在項(xiàng)目中使用了Vue CLI 3.0版本,項(xiàng)目中需要設(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,看看是否展示出了一份所有可用命令的幫助信息,來驗(yàn)證它是否安裝成功。(例如 vue --version)
新建配置文件
在項(xiàng)目的根目錄下新建 vue.config.js 文件,自Vue CLI 3開始,項(xiàng)目中所有的配置信息都寫在這個文件中(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)文章
vue router-link 默認(rèn)a標(biāo)簽去除下劃線的實(shí)現(xiàn)
這篇文章主要介紹了vue router-link 默認(rèn)a標(biāo)簽去除下劃線的實(shí)現(xiàn)操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue項(xiàng)目使用定時器每隔幾秒運(yùn)行一次某方法代碼實(shí)例
有時候在項(xiàng)目中我們經(jīng)常需要設(shè)置簡單的倒計(jì)時功能,這個可以通過定時器來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用定時器每隔幾秒運(yùn)行一次某方法的相關(guān)資料,需要的朋友可以參考下2023-04-04vue的axios使用post時必須使用qs.stringify而get不用問題
這篇文章主要介紹了vue的axios使用post時必須使用qs.stringify而get不用問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01vue項(xiàng)目部署到Apache服務(wù)器中遇到的問題解決
這篇文章主要介紹了vue項(xiàng)目部署到Apache中遇到的問題解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08vue移動端實(shí)現(xiàn)手機(jī)左右滑動入場動畫
這篇文章主要為大家詳細(xì)介紹了vue移動端實(shí)現(xiàn)手機(jī)左右滑動入場動畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-08-08Ant?Design?of?Vue的樹形控件Tree的使用及說明
這篇文章主要介紹了Ant?Design?of?Vue的樹形控件Tree的使用及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10Vue 動態(tài)設(shè)置路由參數(shù)的案例分析
這篇文章主要介紹了Vue 動態(tài)設(shè)置路由參數(shù)的案例分析,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-04-04