成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Webpack多城市部署前端差異化配置實(shí)現(xiàn)

netmou / 2080人閱讀

摘要：公司的項(xiàng)目需要多城市部署，不同城市接口地址相關(guān)服務(wù)地址都會(huì)不同同時(shí)，還需要實(shí)現(xiàn)控制不同城市部分功能開(kāi)啟關(guān)閉。所以，我們將不同城市差異化配置多帶帶使用一個(gè)配置文件整合，代碼中再通過(guò)讀取配置文件來(lái)實(shí)現(xiàn)上述需求。

公司的項(xiàng)目需要多城市部署，不同城市接口地址、相關(guān)服務(wù)地址都會(huì)不同；同時(shí)，還需要實(shí)現(xiàn)控制不同城市部分功能開(kāi)啟/關(guān)閉。這樣一來(lái)，每次不同城市發(fā)包需要修改的地方就會(huì)比較多且分散，這樣就很容易出現(xiàn)疏漏。
所以，我們將不同城市差異化配置多帶帶使用一個(gè)配置文件整合，代碼中再通過(guò)讀取配置文件來(lái)實(shí)現(xiàn)上述需求。
項(xiàng)目使用vue-cli@2.9.6創(chuàng)建;node版本：v8.11.1;。我們一開(kāi)始執(zhí)行不同的腳本命令，配置不同的環(huán)境參數(shù)，來(lái)實(shí)現(xiàn)不同城市的區(qū)分。如下：

通過(guò)運(yùn)行不同命令讀取不同配置 第一步，在package.json的scripts添加腳本設(shè)置環(huán)境參數(shù) 
...
"script": {
    ...
    "dev:changsha": "webpack-dev-server --inline --progress --env=changsha --config build/webpack.dev.conf.js",
    "build:changsha": "node build/build.js --env=changsha"
}
...
第二步，使用yargs在build.js、webpack.dev.conf.js讀取環(huán)境參數(shù)并添加到process.env 
// build/build.js
...
const argv = require("yargs").argv;
process.env.cityName = argv.env
...
// build/webpack.dev.conf.js
...
const argv = require("yargs").argv;
process.env.cityName = argv.env
...

注意： 這里因?yàn)?b>build腳本是使用的node命令，而node命令是可自行添加任意參數(shù)的，即可以使用任意變量名做為環(huán)境參數(shù)；但webpack-dev-server命令卻只支持使用--env選項(xiàng)配置環(huán)境參數(shù)。這里build也使用了env變量來(lái)設(shè)置環(huán)境參數(shù)。但是你也可以這樣添加build腳本：

"build:changsha": "node build/build.js --cityName=changsha"

然后在build.js使用相應(yīng)的變量讀?。?/p> 

const argv = require("yargs").argv;
process.env.cityName = argv.cityName
...
第三步，通過(guò)webpack讀取不同城市的配置文件

在./config文件夾下添加changsha,chengdu兩個(gè)文件夾，分別在兩個(gè)文件夾中添加dev.conf.js、prod.conf.js。例如：

// ./config/changsha/dev.conf.js
module.exports = {
    apisIp:""http://192.200.115.1:8080"",
    videoIp:""http://192.200.115.2:8080"",
    openFun1: true,
    openFun2: true
    ...
}
// ./config/changsha/prod.conf.js
module.exports = {
    apisIp:""http://192.200.141.1:8080"",
    videoIp:""http://192.200.141.2:8080"",
    openFun1: true,
    openFun2: false
    ...
}

然后./config下的prod.env.js、dev.env.js分別讀取prod.conf.js、dev.conf.js配置

// 修改./config/dev.env.js為
"use strict"
const prodEnv = require("./prod.env")
const cityConf = require(`./${process.env.cityName||"chengdu"}/dev.conf.js`)
module.exports = Object.assign(prodEnv, {NODE_ENV: ""development""}, cityConf)
// 修改./config/dev.env.js為
"use strict"
const cityConf = require(`./${process.env.cityName||"chengdu"}/prod.conf.js`)
module.exports = {
  NODE_ENV: ""production"",
  ...cityConf
}

注意：

prod.env.js、dev.env.js都默認(rèn)加載chengdu文件下相應(yīng)的配置；

之所以在prod.env.js、dev.env.js中加載相應(yīng)配置就會(huì)生效，是因?yàn)樵?b>webpack.prod.conf.js、webpack.dev.conf.js兩個(gè)文件中分別讀取前兩個(gè)文件；webpack.dev.conf.js就是開(kāi)發(fā)環(huán)境的入口文件；打包的入口文件build.js讀取了webpack.prod.conf.js；

webpack.dev.conf.js和webpack.prod.conf.js都是使用DefinePlugin插件將環(huán)境配置寫(xiě)入process.dev的。所以，你也可以使用其它變量名保存配置；同時(shí)，你也可以不通過(guò)prod.env.js、dev.env.js讀取配置，可以直接在webpack.dev.conf.js、webpack.prod.conf.js中讀取；

Node.js有一個(gè)process全局變量，webpack也會(huì)生成一個(gè)process,這兩個(gè)只是名稱相同，但并不是同一個(gè)對(duì)象；前一個(gè)process只能webpack讀取，我們?cè)诰唧w的前端代碼中是無(wú)法讀取的；后一個(gè)為webpack供給前端代碼讀取的全局變量，打包后webpack會(huì)將所有調(diào)用prcess的代碼直接替換為具體的值；

最后，在具體前端代碼中讀取使用 
// 例如，在./src/components/HelloWorld.vue中，我們可以這樣使用：



...
總結(jié)

最后，總結(jié)梳理一下思路，大概是以下幾步：

通過(guò)命令行參數(shù)寫(xiě)入環(huán)境參數(shù)；

將環(huán)境參數(shù)保存全node全局變量process的env對(duì)象上；

webpack根據(jù)環(huán)境參數(shù)讀取相應(yīng)配置并寫(xiě)入一個(gè)全局變量供代碼讀取;

具體代碼中，通過(guò)讀取上一步定義的全局變量，實(shí)現(xiàn)相關(guān)功能;

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102723.html

相關(guān)文章

  • 庫(kù)&插件&框架&工具

    摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當(dāng)下最熱門(mén)的前端資源模塊化管理和打包工具。 nodejs 入門(mén) nodejs 入門(mén)教程，大家可以在 github 上提交錯(cuò)誤 2016 年最好用的表單驗(yàn)證庫(kù) SMValidator.js 前端表單驗(yàn)證工具分享 淺談前端線上部署與運(yùn)維 說(shuō)到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對(duì)接、一起完...

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

  • 庫(kù)&插件&框架&工具

    摘要：一些有用的一些有用的，包括轉(zhuǎn)換小箭頭三角形媒體查詢等中文指南是當(dāng)下最熱門(mén)的前端資源模塊化管理和打包工具。 nodejs 入門(mén) nodejs 入門(mén)教程，大家可以在 github 上提交錯(cuò)誤 2016 年最好用的表單驗(yàn)證庫(kù) SMValidator.js 前端表單驗(yàn)證工具分享 淺談前端線上部署與運(yùn)維 說(shuō)到前端部署，可能大多數(shù)前端工程師在工作中都是使用的公司現(xiàn)成的部署系統(tǒng)，與SRE對(duì)接、一起完...

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

  • 新鮮出爐的8月前端面試題

    摘要：前言最近參加了幾場(chǎng)面試，積累了一些高頻面試題，我把面試題分為兩類(lèi)，一種是基礎(chǔ)試題主要考察前端技基礎(chǔ)是否扎實(shí)，是否能夠?qū)⑶岸酥R(shí)體系串聯(lián)。 前言 最近參加了幾場(chǎng)面試，積累了一些高頻面試題，我把面試題分為兩類(lèi)，一種是基礎(chǔ)試題: 主要考察前端技基礎(chǔ)是否扎實(shí)，是否能夠?qū)⑶岸酥R(shí)體系串聯(lián)。一種是開(kāi)放式問(wèn)題: 考察業(yè)務(wù)積累，是否有自己的思考，思考問(wèn)題的方式，這類(lèi)問(wèn)題沒(méi)有標(biāo)準(zhǔn)答案。 基礎(chǔ)題 題目的答...

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

  • Nginx

    摘要：此外，其也能夠提供強(qiáng)大的反向代理功能。是由為俄羅斯訪問(wèn)量第二的站點(diǎn)開(kāi)發(fā)的，第一個(gè)公開(kāi)版本發(fā)布于年月日。 keepalived+nginx 實(shí)現(xiàn)高可用雙機(jī)熱備 + 負(fù)載均衡架構(gòu) 1 準(zhǔn)備4個(gè)ubuntu16.04虛擬機(jī)（啟用網(wǎng)卡二并使用橋接模式）:A服務(wù)器：192.168.0.103 主B服務(wù)器：192.168.0.104 主（備） 前端工程師學(xué)習(xí) Nginx ...

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

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

0條評(píng)論

閱讀需要支付1元查看
<