1.安装 generate-asset-webpack-plugin
npm install --save-dev generate-asset-webpack-plugin
2.修改 /build/webpack.dev.conf.js
const GenerateAssetPlugin = require('generate-asset-webpack-plugin');
const configJson = function(compilation) {
let cfgJson = {
APIUrl: "https://www.baidu.com/api/", //接口地址
windowUrl: "https://www.baidu.com/" //项目域名
};
return JSON.stringify(cfgJson);
}
//这段代码加在plugins:[]中
new GenerateAssetPlugin({
filename: 'configJson.json',
fn: (compilation, cb) => {
cb(null, configJson(compilation));
},
extraFiles: []
})
3.修改 /build/webpack.dev.conf.js (和上一步一样)
4.修改 /src/main.js
Vue.prototype.configJson = function() {
axios.get("/configJson.json", {
headers: {
'Content-Type':'application/json;charset=UTF-8'
}
}).then((data) => { //data是configJson.json中自定义配置
sessionStorage.setItem('tcUrl', JSON.stringify(data.data));
}).catch((error) => {
console.log(error)
});
}
5.修改 /src/App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
mounted:function(){
this.configJson();
}
}
</script>