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

公司的项目须要多城市部署，不一样城市接口地址、相关服务地址都会不一样；同时，还须要实现控制不一样城市部分功能开启/关闭。这样一来，每次不一样城市发包须要修改的地方就会比较多且分散，这样就很容易出现疏漏。
因此，咱们将不一样城市差别化配置单独使用一个配置文件整合，代码中再经过读取配置文件来实现上述需求。
项目使用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中，咱们能够这样使用：
<template>
  <div class="hello">
    <video><source :src="videoIp +'/a.mp4'"/></video>
    <div v-if="openFun1">放开功能1入口</div>
    <div v-if="openFun2">放开功能2入口</div>
  </div>
</template>

<script>
const apisIp = process.env.apisIp
export default {
  name: 'HelloWorld',
  data () {
    return {
      videoIp: process.env.videoIp,
      openFun1: process.env.openFun1,
      openFun2: process.env.openFun2
    }
  },
  methods: {
    getData () {
      this.$axios.get(apisIp + '/apis/daga')
        .then((data) => { console.log(data) })
    }
  }
}
</script>
...

总结

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

1. 经过命令行参数写入环境参数；
2. 将环境参数保存全node全局变量process的env对象上；
3. webpack根据环境参数读取相应配置并写入一个全局变量供代码读取;
4. 具体代码中，经过读取上一步定义的全局变量，实现相关功能;