前端项目如何添加配置文件

最近碰到一个需求，公司两个独立的项目，其中A项目需上报埋点数据给B项目，因为两个项目完全独立，部署的服务器不一样，参与的开发人员，测试也都不一样，其中接收上报数据的路径也可能经常发生变化，为避免这些无伤大雅的修改都要走回开发人员手中，故将一些参数作为配置项，以便测试或实施的同事按情况修改。

前端项目采用Vue框架，由Webpack打包，此为背景。

因为项目被打包后，代码结构难以区分，也不支持实时修改，为添加一个可以build后可实时修改生效的配置文件，在此，我用到了generate-asset-webpack-plugin插件。

下面是具体工程：

(1)安装generate-asset-webpack-plugin插件

npm install --save-dev generate-asset-webpack-plugin

(2)在webpack的配置文件webpack.prod.conf.js中引用该插件

var GenerateAssetPlugin = require('generate-asset-webpack-plugin');

(3)在项目根目录创建serverConfig.json文件，内容为需要添加的配置项，比如我的是:

因为json文件不支持注释，故前两项是注释，以下划线区别(这也是我觉得用json文件作为配置项很不合适的一方面啊！！！)

{
    "_isReport": "埋点开关，true为开，false为关",
    "_reportPath": "埋点上报路径",
    "isReport": true,
    "reportPath": "http://192.168.2.103:8092",
}

(4)引入添加的serverConfig.json文件

const serverConfig = require('../serverConfig.json')

(5)添加打包时写入配置文件的代码

const createJson = function(compilation) {
      return JSON.stringify(serverConfig);
};

(6)添加打包时输出配置文件的代码

var webpackConfig = {

    plugins: [

        new GenerateAssetPlugin({

            filename: 'serverConfig.json',         // build后生成的配置文件名字及路径设置

            fn: (compilation, cb) => {

                cb(null, createJson(compilation));

            }
        })

    ]

    // other webpack config ...

}

(7)在main.js中添加读取build之后的代码

  Vue.prototype.$axios.get('serverConfig.json').then((result)=>{
    Vue.prototype.config = result; //设置成Vue的全局属性
  }).catch((error)=>{
    console.log(error)
  })

(8)在代码中打印配置项

console.log(this.config.reportPath)

(9)npm run build,打包后的目录结构如下

注意项：

有可能因为你的其他插件配置的原因，最后生成的serverConfig.json不一定在dist目录下，而是在static目录下，也没有关系的，一样可以修改后生效，如果觉得不方便看的话，可以在插件配置filename那里去更改路径。