成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue多環(huán)境代理配置

hss01248 / 2481人閱讀

摘要：多環(huán)境代理配置背景多人協(xié)作模式下，修改代理比較麻煩，而且很容易某個(gè)開(kāi)發(fā)人員會(huì)修改了文件后提交了。在中配置代理這么配置可以滿足需求，但是會(huì)有多人改動(dòng)的情況，造成以上說(shuō)的錯(cuò)誤。

Vue多環(huán)境代理配置

背景： 多人協(xié)作模式下，修改代理比較麻煩，而且很容易某個(gè)開(kāi)發(fā)人員會(huì)修改了vue.config.js文件后提交了。第一，很容易引起沖突。 第二，很容易出現(xiàn)代理錯(cuò)誤，需要排查。而且現(xiàn)在微服務(wù)盛行，在生產(chǎn)環(huán)境下有網(wǎng)關(guān)配置，不會(huì)出錯(cuò)，但是在本地調(diào)試會(huì)造成麻煩，如修改了代理地址需要同步修改代理中的地址，很麻煩也很容易出錯(cuò)。
解決思路：

1.開(kāi)發(fā)中定義常量js文件，例如constants.js。用戶存放各個(gè)服務(wù)需要代理的服務(wù)名。


 let api = ""
    let loginServer = "/loginServer"
    let businessServer = "/businessServe"
    if(process.env.NODE_ENV == "development"){
        api = "/api"
        loginServer = api + LoginServer
        businessServer = api + businessServer
    }
    export {
        loginServer,
        businessServer
    }
其中api為代理規(guī)則中配置，loginServer為服務(wù)名，可根據(jù)業(yè)務(wù)需要替換
在實(shí)際的業(yè)務(wù)中就可以這么用
 import {loginServer} from "constants"
 function login(params){
    return  axios.post(loginServer+"/login",params)
 }

其中 loginServer為服務(wù)名，login為方法名，params為參數(shù)。
在vue.config.js中配置代理

modules.exports = {
    publicPath:"/" ,
    devServer: {
        port: 8080,
        proxy:{
          "/api/loginServer":{
              target:"http://localhost:8080",
              ws:true,
              changeOrigin:true,
              pathRewrite:{
                  "^/api":"/"
              }
          },
           "/api/businessServer":{
              target:"http://localhost:8081",
              ws:true,
              changeOrigin:true,
              pathRewrite:{
                  "^/api":"/"
              }
          }
        }
    }
}

這么配置可以滿足需求，但是會(huì)有多人改動(dòng)vue.config.js的情況，造成以上說(shuō)的錯(cuò)誤。

解決方案：
vue中提供了 --mode 模式，并提供了 .env.local 等文件，此文件被git忽略，且可根據(jù)當(dāng)前 mode設(shè)置的值尋找環(huán)境變量配置，例如 --mode=dev ，則.env.dev.local 或.env.dev 等文件中的配置會(huì)生效，.local文件會(huì)被git忽略，因此咱們用這個(gè)，--mode設(shè)置在 package.json中，在npm run serve 中添加

script:{
"serve":"vue-cli-service serve --mode=dev"
}

在項(xiàng)目根目錄下jianli .env.dev.local文件，文件中添加 以下鍵值對(duì)（此文件中只接受鍵值對(duì)
）
.env.dev.local

loginServerURL =http://localhost:8080
businessServerURL = http://localhost:8081

當(dāng)然可根據(jù)不同的模式建立不同的local文件
.env.prod.local等

vue.config.js中改寫

modules.exports = {
    publicPath:"/" ,
    devServer: {
        port: 8080,
        proxy:{
          "/api/loginServer":{
              target:process.env.loginServerURL?process.env.loginServerURL:"httpL//localhost:8080",
              ws:true,
              changeOrigin:true,
              pathRewrite:{
                  "^/api":"/"
              }
          },
           "/api/businessServer":{
              target:process.env.loginServerURL?process.env.businessServerURL :"http://localhost:8081",
              ws:true,
              changeOrigin:true,
              pathRewrite:{
                  "^/api":"/"
              }
          }
        }
    }
}

這樣就可以根據(jù)不同的環(huán)境配置不同的地址了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104884.html

相關(guān)文章

  • vue配置文件實(shí)現(xiàn)代理v2版本

    摘要：實(shí)現(xiàn)不同服務(wù)器代理接上篇，雖然可實(shí)現(xiàn)多版本代理，但是每增加一種模式就需要重下新修改以及，感覺(jué)很不智能，擴(kuò)展性挺差。使用時(shí)只需更改文件即可，即使增加了代理也可只增加配置文件完成代理。 vue實(shí)現(xiàn)不同服務(wù)器代理 接上篇，雖然可實(shí)現(xiàn)多版本代理，但是每增加一種模式就需要重下新修改vue.config.js以及.env.dev.local，感覺(jué)很不智能，擴(kuò)展性挺差。主要實(shí)現(xiàn)思路： 模仿vue中....

    CoXie 評(píng)論0 收藏0

  • vue多環(huán)境配置方案

    摘要：前端項(xiàng)目上線的時(shí)候不可避免的會(huì)考慮到不同的運(yùn)行環(huán)境需要前端請(qǐng)求不同服務(wù)地址的問(wèn)題方案一一般的情況下可以使用環(huán)境變量進(jìn)行分環(huán)境打包開(kāi)發(fā)環(huán)境繼續(xù)使用代理需要編譯的環(huán)境通過(guò)設(shè)置環(huán)境變量去控制打包過(guò)程最終生成適用于不同環(huán)境的前端資源有關(guān)環(huán)境 前端項(xiàng)目上線的時(shí)候 , 不可避免的會(huì)考慮到不同的運(yùn)行環(huán)境需要前端請(qǐng)求不同服務(wù)地址的問(wèn)題 方案一 : 一般的情況下 , 可以使用vue-cli-servi...

    zhouzhou 評(píng)論0 收藏0

  • VUE使用中踩過(guò)的坑

    摘要：前言如今可謂是一匹黑馬數(shù)已居第一位前端開(kāi)發(fā)對(duì)于的使用已經(jīng)越來(lái)越多，它的優(yōu)點(diǎn)就不做介紹了本篇是我對(duì)使用過(guò)程中以及對(duì)一些社區(qū)朋友提問(wèn)我的問(wèn)題中做的一些總結(jié)幫助大家踩坑。隨后的重新渲染，元素組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)。 前言 vue如今可謂是一匹黑馬,github star數(shù)已居第一位！前端開(kāi)發(fā)對(duì)于vue的使用已經(jīng)越來(lái)越多，它的優(yōu)點(diǎn)就不做介紹了,本篇是我對(duì)vue使用過(guò)程中以及...

    big_cat 評(píng)論0 收藏0

  • Vue 兼容 ie9 的全面解決方案

    摘要：本文將針對(duì)使用生態(tài)開(kāi)發(fā)完成的網(wǎng)站，以版本為基礎(chǔ)兼容目標(biāo)，實(shí)現(xiàn)全功能正常使用的全面兼容解決方案。這樣做的目的，是逐步減少全局性方法，使得語(yǔ)言逐步模塊化。此外，使用這個(gè)，一旦頁(yè)面不處于瀏覽器的當(dāng)前標(biāo)簽，就會(huì)自動(dòng)停止刷新。 前言 背景情況 vue - 2.5.11 vue-cli 使用模板 webpack-simple http請(qǐng)求：axios Vue 官方對(duì)于 ie 瀏覽器版本兼容情...

    codeKK 評(píng)論0 收藏0

  • vue-cli 3.x配置跨域代理

    摘要：需求上是我們只需要在開(kāi)發(fā)環(huán)境配置跨域代理，所以我們可以在開(kāi)發(fā)環(huán)境的配置上加上能夠代理上的環(huán)境變量即可。修改的配置將改為這里依然是采用的來(lái)做的代理配置，一些自定義配置可以移步到官網(wǎng)去進(jìn)行參考。 寫在前面 vue-cli 3.x 的beta版本已經(jīng)發(fā)布了一段時(shí)間，很早就像體驗(yàn)一番一直找不到時(shí)間。這些日子剛好有空就想著依照網(wǎng)上的一些例子練下手，剛一上手就踩到坑了。3.x 版本對(duì)整個(gè)項(xiàng)目的構(gòu)建...

    weakish 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<