資訊專欄INFORMATION COLUMN
摘要：公司的項目需要多城市部署，不同城市接口地址相關服務地址都會不同同時，還需要實現控制不同城市部分功能開啟關閉。所以，我們將不同城市差異化配置多帶帶使用一個配置文件整合，代碼中再通過讀取配置文件來實現上述需求。
公司的項目需要多城市部署，不同城市接口地址、相關服務地址都會不同；同時，還需要實現控制不同城市部分功能開啟/關閉。這樣一來，每次不同城市發包需要修改的地方就會比較多且分散，這樣就很容易出現疏漏。
所以，我們將不同城市差異化配置多帶帶使用一個配置文件整合，代碼中再通過讀取配置文件來實現上述需求。
項目使用vue-cli@2.9.6創建;node版本：v8.11.1;。我們一開始執行不同的腳本命令，配置不同的環境參數，來實現不同城市的區分。如下：
...
"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讀取環境參數并添加到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
...
注意： 這里因為build腳本是使用的node命令，而node命令是可自行添加任意參數的，即可以使用任意變量名做為環境參數；但webpack-dev-server命令卻只支持使用--env選項配置環境參數。這里build也使用了env變量來設置環境參數。但是你也可以這樣添加build腳本：
"build:changsha": "node build/build.js --cityName=changsha"
然后在build.js使用相應的變量讀?。?/p>
const argv = require("yargs").argv;
process.env.cityName = argv.cityName
...
第三步，通過webpack讀取不同城市的配置文件
在./config文件夾下添加changsha,chengdu兩個文件夾，分別在兩個文件夾中添加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都默認加載chengdu文件下相應的配置；
之所以在prod.env.js、dev.env.js中加載相應配置就會生效，是因為在webpack.prod.conf.js、webpack.dev.conf.js兩個文件中分別讀取前兩個文件；webpack.dev.conf.js就是開發環境的入口文件；打包的入口文件build.js讀取了webpack.prod.conf.js；
webpack.dev.conf.js和webpack.prod.conf.js都是使用DefinePlugin插件將環境配置寫入process.dev的。所以，你也可以使用其它變量名保存配置；同時，你也可以不通過prod.env.js、dev.env.js讀取配置，可以直接在webpack.dev.conf.js、webpack.prod.conf.js中讀取；
Node.js有一個process全局變量，webpack也會生成一個process,這兩個只是名稱相同，但并不是同一個對象；前一個process只能webpack讀取，我們在具體的前端代碼中是無法讀取的；后一個為webpack供給前端代碼讀取的全局變量，打包后webpack會將所有調用prcess的代碼直接替換為具體的值；
最后，在具體前端代碼中讀取使用// 例如，在./src/components/HelloWorld.vue中，我們可以這樣使用：總結...放開功能1入口放開功能2入口
最后，總結梳理一下思路，大概是以下幾步：
通過命令行參數寫入環境參數；
將環境參數保存全node全局變量process的env對象上；
webpack根據環境參數讀取相應配置并寫入一個全局變量供代碼讀取;
具體代碼中，通過讀取上一步定義的全局變量，實現相關功能;
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102723.html
摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...
摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...
摘要：前言最近參加了幾場面試，積累了一些高頻面試題，我把面試題分為兩類，一種是基礎試題主要考察前端技基礎是否扎實，是否能夠將前端知識體系串聯。 前言 最近參加了幾場面試，積累了一些高頻面試題，我把面試題分為兩類，一種是基礎試題: 主要考察前端技基礎是否扎實，是否能夠將前端知識體系串聯。一種是開放式問題: 考察業務積累，是否有自己的思考，思考問題的方式，這類問題沒有標準答案。 基礎題 題目的答...
閱讀 1778·2023-04-25 14:33
閱讀 3378·2021-11-22 15:22
閱讀 2177·2021-09-30 09:48
閱讀 2684·2021-09-14 18:01
閱讀 1740·2019-08-30 15:55
閱讀 3006·2019-08-30 15:53
閱讀 2139·2019-08-30 15:44
閱讀 648·2019-08-30 10:58
