vue cli4配置动态地址

有些资源地址 vue打包之后如果修改需要重新打包，这就很烦，有很多 vue cli2 的参考文档，刚好配置出了 vue cli4 ，在这里记录一下

1. 安装 generate-asset-webpack-plugin

yarn add  generate-asset-webpack-plugin

2. vue.config.js 中配置 generate-asset-webpack-plugin

const GenerateAssetPlugin = require("generate-asset-webpack-plugin"); //引入插件
const serverConfig = require("./fileUrl.json");

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

module.exports = {
 ...
    configureWebpack: {
        plugins: [
            new GenerateAssetPlugin({
                filename: 'fileUrl.json',
                fn: (compilation, cb) => {
                    cb(null, createJson(compilation));
                }
            })
        ]
    },
     ...
    }

3. 在main.js 中加载 fileUrl.json，并且配置为全局参数，进行调用

Vue.prototype.getConfigJson = function () {
  axios.get(fileUrl.json').then((result)=>{
    console.log(result);
    Vue.prototype.fileJson =result.data;//设置成Vue的全局属性
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount("#app");
  }).catch((error)=>{
    console.log(error)
  })
}
Vue.prototype.getConfigJson()//调用声明的全局方法

4.使用 用 this.fileJson 即可拿到 fileUrl.json 对象，

<template>
  <div class="hello">
    ================
    <h1>{{ fileJson }}</h1>
    ================
  </div>
</template>