Webpack多城市部署前端差异化配置实现

netmou 发布于2019-08-23 16:08 / 2024人阅读

摘要：公司的项目需要多城市部署，不同城市接口地址相关服务地址都会不同同时，还需要实现控制不同城市部分功能开启关闭。所以，我们将不同城市差异化配置多带带使用一个配置文件整合，代码中再通过读取配置文件来实现上述需求。

公司的项目需要多城市部署，不同城市接口地址、相关服务地址都会不同；同时，还需要实现控制不同城市部分功能开启/关闭。这样一来，每次不同城市发包需要修改的地方就会比较多且分散，这样就很容易出现疏漏。
所以，我们将不同城市差异化配置多带带使用一个配置文件整合，代码中再通过读取配置文件来实现上述需求。
项目使用vue-cli@2.9.6创建;node版本：v8.11.1;。我们一开始执行不同的脚本命令，配置不同的环境参数，来实现不同城市的区分。如下：

通过运行不同命令读取不同配置 第一步，在package.json的scripts添加脚本设置环境参数

...
"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使用相应的变量读取：

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中，我们可以这样使用：



...

总结

最后，总结梳理一下思路，大概是以下几步：

通过命令行参数写入环境参数；

将环境参数保存全node全局变量process的env对象上；

webpack根据环境参数读取相应配置并写入一个全局变量供代码读取;

具体代码中，通过读取上一步定义的全局变量，实现相关功能;

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102723.html

库&插件&框架&工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

Codeing_ls 2019-08-01 18:22 评论0 收藏0
库&插件&框架&工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

xiaowugui666 2019-08-21 18:43 评论0 收藏0
新鲜出炉的8月前端面试题

摘要：前言最近参加了几场面试，积累了一些高频面试题，我把面试题分为两类，一种是基础试题主要考察前端技基础是否扎实，是否能够将前端知识体系串联。前言最近参加了几场面试，积累了一些高频面试题，我把面试题分为两类，一种是基础试题: 主要考察前端技基础是否扎实，是否能够将前端知识体系串联。一种是开放式问题: 考察业务积累，是否有自己的思考，思考问题的方式，这类问题没有标准答案。基础题题目的答...

qingshanli1988 2019-08-23 10:47 评论0 收藏0
Nginx

摘要：此外，其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的，第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机（启用网卡二并使用桥接模式）:A服务器：192.168.0.103 主B服务器：192.168.0.104 主（备）前端工程师学习 Nginx ...

syoya 2019-07-25 14:06 评论0 收藏0