webpack + vue 打包生成公共配置文件（域名） 方便动态修改

需求原因

 原来的项目中域名是打包到项目里面的，打包后不能动态配置，只能通过不同的指令打包来切换域名，每天都在测试域名和正式域名来回摩擦，后台大佬说你们可以生成一个配置文件这样就不用频繁打包了直接修改配置文件就好，于是就有了这篇文章。

 

第一步 安装插件      

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

 

第二步 新建配置文件

在项目的根目录下新建 serverConfig.json 以后会根据这个文件去生成打包的配置文件

{"ProdUrl":"http://text.com"}

 

第三步 引入generate-asset-webpack-plugin

在build/webpack.prod.conf.js中添加

 

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

const serverConfig = require('../serverConfig.json')；//引入根目录下的配置文件


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

//plugins 中使用
  plugins: [
    //打包时生成一个配置文件
    new GenerateAssetPlugin({
      filename: 'serverConfig.json',
      fn: (compilation, cb) => {
          cb(null, createJson());
      },
  }),
]

 

 

第四步 使用配置文件中的内容

这里根据不同项目不同需求代码自行变换，我分享一下我的项目里的使用。在main.js 中vue实例初始化之前将baseURL存到本地

 

axios.get('serverConfig.json').then( e => {
  let baseURL = e.data.ProdUrl
  localStorage.setItem("baseURL", baseURL);
  new Vue({
    el: '#app',
    router,
    store,
    i18n,
    render: h => h(App)
  })
})

 

由于是使用axios获取，是异步方法，根据情况进行处理。、

好了接下来就再也不用为了域名每天build了

 

打包后的目录