vue+webpack实现vue打包后生成配置文件用以外部修改公共路径

1、问题初衷

解决问题的初衷，源于vue项目中公共路径在打包之后一旦遇到整体的路径更改就需要再次build一下。 如果公司小，项目部署的实施人员又能随时联系到开发人员。直接简单的build一下就OK了。又或者开发人员自己直接就解决一下也行。但是公司一旦大，这期间的沟通，联络等等，顺利的话还行，不顺利呢。也不能让实施人员干等着。 要是实施人员不用等开发人员用源码重新build的话，直接有一个外部的文件，直接修改。就能解决这期间的问题的话。那将大大的提高效率。

2、解决方案

第一步：安装generate-asset-webpack-plugin插件

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

第二步：在根目录下添加serverConfig.json的配置文件

serverConfig.json

serverConfig.json

(注：哪些公共的觉得有必要的都可以用jsonde 形式写在里面）
第三步：在build/webpack.prod.conf.js文件里引入generate-asset-webpack-plugin

const GeneraterAssetPlugin = require('generate-asset-webpack-plugin')

第四步：引入添加的serverConfig.json文件

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

第五步：添加打包时写入配置文件的代码

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

第六步：添加打包时输出配置文件的代码

  new GeneraterAssetPlugin({
      filename: 'serverConfig.json',//输出到dist根目录下的serverConfig.json文件,名字可以按需改
      fn: (compilation, cb) => {
      cb(null, createJson(compilation));
   }
})

第七步：在main.js中添加读取build之后的代码

Vue.prototype.getConfigJson = function () {
  Vue.prototype.$axios.get('serverConfig.json').then((result)=>{
    console.log(result);
    Vue.prototype.baseUrl =result.data.baseUrl;//设置成Vue的全局属性
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
  }).catch((error)=>{
    console.log(error)
  })
}
Vue.prototype.getConfigJson()//调用声明的全局方法

第八步：项目中引用

this.baseUrl+'/123'

注：

npm  run  build

项目生成的结构：

生成的dist文件结构

其中生成的serverConfig.json

serverConfig.json

最后希望这篇文章能够帮助你解决一些问题。也不枉费自己在坑里面替大家铺路O(∩_∩)O哈哈~，记得关注+喜欢

更新

很多人搜到的还是这片文章，所以整理了一下：https://www.jianshu.com/p/c085677ae70b 里面包含脚手架cli2.x 和cli3.x

1、如果对你有帮助的话，记得给个赞赏加关注，鼓励一下。