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

資訊專欄INFORMATION COLUMN

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

CoXie / 1336人閱讀

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

vue實現(xiàn)不同服務(wù)器代理

接上篇，雖然可實現(xiàn)多版本代理，但是每增加一種模式就需要重下新修改vue.config.js以及.env.dev.local，感覺很不智能，擴展性挺差。
主要實現(xiàn)思路： 模仿vue中.env.local文件，此文件被git忽略，且可根據(jù)當前環(huán)境變量加載不同的數(shù)據(jù)，由此在項目根目錄下新建development文件夾，在development文件加下建立config文件夾，用戶放置配置文件，config下目前暫有兩個文件 config.development.local config.owndev.local
在.gitignore中添加
development/config/config.local
development/config/config.*.local
忽略所有的配置local文件，然后通過node讀取文件加載配置的json文件，并將代理規(guī)則通過代碼完善，導出代理規(guī)則，最終輸出的vue.config.js中實現(xiàn)代理,通過cross-env模塊改變系統(tǒng)變量設(shè)置，最終實現(xiàn)不同環(huán)境下不同文件的加載

現(xiàn)新建項目，目錄結(jié)構(gòu)如下：

其中development為新添加目錄，其中主要放置需要代理的文件


config下

.gitignore 添加對文件的忽略

development/config/config.local
development/config/config.*.local

development/config 下的config.development.dev

  {
      "/api":"http://serverurl"
  }

development/config 下的config.owndev.dev

{
      "/api/login":"http://localhost:8080",
      "/api/register":"http://localhost:8081"
}

proxy.js實現(xiàn)主要的代理邏輯，思路如下，根據(jù)cross-env設(shè)置的環(huán)境變量加載不同的json文件
cross-env 用法，在package.json 中devDependencies中添加 ,然后npm i --save-dev cross-env即可

 "devDependencies": {
    "cross-env": "^5.2.0"
  }

用法 在啟動vue服務(wù)前添加 cross-env BUILD_ENV=development 即可
如下

"script":{
     "serve": "cross-env BUILD_ENV=development  vue-cli-service serve",
     "owndev": "cross-env BUILD_ENV=owndev  vue-cli-service serve",
}

當執(zhí)行npm run serve 時 process.env.BUILD_ENV 值為development,當執(zhí)行 npm run owndev時，process.env.BUILD_ENV的值為 owndev
proxy.js實現(xiàn)的主邏輯如下：

var path = require("path"); //系統(tǒng)路徑模塊
var fs = require("fs"); //文件模塊
const defaultProxy =  {
    "/api":"http://serverUrl"
};
//根據(jù)當前的運行環(huán)境判斷走哪個配置
const DEVELOPMENT = "development"
let currentEnv = process.env.BUILD_ENV?process.env.BUILD_ENV:DEVELOPMENT
let configPath = `config/config.${currentEnv}.local`
let filePath = path.join(__dirname, configPath); //文件路徑，__dirname為當前運行js文件的目錄
let proxyContent =  null;
//讀取json文件,異步
/*fs.readFile(filePath, "utf-8", function(err, data) {
    if (!err) {
       proxyContent = data;
    } 
});*/
//將json字符串轉(zhuǎn)化為json對象
try{
proxyContent = JSON.parse(fs.readFileSync(filePath,"utf-8"))
}catch(e){
proxyContent = defaultProxy
}
if(proxyContent == null){
    proxyContent = defaultProxy
}
let proxys = {}
//遍歷所有的配置代理，對應(yīng)不同的服務(wù)器

Object.getOwnPropertyNames(proxyContent).forEach(function (key) {
    let targetPath = proxyContent[key]
    let proxyItem = {};
    proxyItem.target = targetPath;
    proxyItem.ws = true;
    proxyItem.changeOrigin = true;
    proxyItem.pathRewrite = {}
    proxyItem.pathRewrite[`^${key}`] = "/"
    proxys[key] = proxyItem
});

module.exports = proxys

在vue.config.js中引用該文件

let proxy = require("./development/proxy/proxy")

let config =  {
    publicPath:"/" ,
    devServer: {
        port: 8080,
        proxy:proxy
    }
}

module.exports = config

以上，完成。使用時只需更改 development/config/config.owndev.local文件即可，即使增加了代理也可只增加配置文件完成代理。

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

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

相關(guān)文章

  • 用 Vue 全家桶二次開發(fā) V2EX 社區(qū)

    摘要：一開發(fā)背景為了全面的熟悉技術(shù)棧，結(jié)合的開放開發(fā)了這個簡潔版的。在線預覽來自官方以及的整理。當頁面刷新后也無法顯示，請查看控制臺的異步請求是否返回。 一、開發(fā)背景 為了全面的熟悉Vue+Vue-router+Vuex+axios技術(shù)棧，結(jié)合V2EX的開放API開發(fā)了這個簡潔版的V2EX。 在線預覽 API來自官方以及djyde的整理。 在線訪問請節(jié)制使用，跨域是通過Nginx配置反向代...

    shiguibiao 評論0 收藏0

  • 實例PK(Vue服務(wù)端渲染 VS Vue瀏覽器端渲染)

    摘要：說起，其實早在出現(xiàn)之前，網(wǎng)頁就是在服務(wù)端渲染的。二服務(wù)器渲染如此快有部分原因來自，但是排除這部分，還是比瀏覽器端要快至少幾倍。當然，我們可以考慮首屏采用服務(wù)端渲染的方式，因為完全服務(wù)端渲染會考慮到很多問題，比如復雜均衡等等等 Vue 2.0 開始支持服務(wù)端渲染的功能，所以本文章也是基于vue 2.0以上版本。網(wǎng)上對于服務(wù)端渲染的資料還是比較少，最經(jīng)典的莫過于Vue作者尤雨溪大神的 vu...

    GeekGhc 評論0 收藏0

  • 微豆 - Vue 2.0 實現(xiàn)豆瓣 Web App 教程

    摘要：微豆一個使用與重構(gòu)豆瓣的項目。在中的配置代理重新啟動，打開查看結(jié)果是否與直接請求豆瓣相同。更多請參考豆瓣電影文檔。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。 微豆 Vdo 一個使用 Vue.js 與 Material Design 重構(gòu) 豆瓣 的項目。 項目網(wǎng)站 http://vdo.ralfz.com/ GitHub https:...

    cjie 評論0 收藏0

  • Vue全家桶實現(xiàn)還原豆瓣電影wap版

    摘要：豆瓣電影版用全家桶仿寫豆瓣電影版。原計劃仿寫完所有頁面，礙于豆瓣的接口有限，實現(xiàn)頁面也有限。由于公開的豆瓣接口具有訪問次數(shù)限制，克隆到本地體驗效果更加端訪問已設(shè)置寬度適配。 douban-movie(豆瓣電影wap版) 用vue全家桶仿寫豆瓣電影wap版。 最近在公司項目中嘗試使用vue，但奈何自己初學水平有限，上了vue沒有上vuex，開發(fā)過程特別難受。 于是玩一玩本項目，算是對相關(guān)...

    Near_Li 評論0 收藏0

  • 跨域解決方案（易懂，持續(xù)更新中……）

    摘要：跨域總結(jié)跨域思路跨域解決方案一般分為兩種前端解決，后端解決前端解決方案通過前端解決的思想就是，通過設(shè)置中間件把跨域的請求轉(zhuǎn)發(fā)一下，其實就是反向代理，比如想要訪問豆瓣的接口很，但是如果請求的是就不存在跨域反向代理就是截取之后重寫請求將請求轉(zhuǎn)發(fā) 跨域總結(jié) 1.跨域思路 跨域解決方案一般分為兩種：前端解決，后端解決 1.1 前端解決方案 通過前端解決的思想就是，通過設(shè)置中間件把跨域的請求轉(zhuǎn)發(fā)...

    wupengyu 評論0 收藏0

發(fā)表評論

0條評論

CoXie

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<