有些资源地址 vue打包之后如果修改需要重新打包,这就很烦,有很多 vue cli2 的参考文档,刚好配置出了 vue cli4 ,在这里记录一下
yarn add generate-asset-webpack-plugin
- 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));
}
})
]
},
...
}
- 在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>