因为项目需求,需要打包后可以更改文件配置界面1.安装插件npminstall--save-devgenerate-asset-webpack-plugin2.使用插件(vue.config.js)来在vue-cli3中配置webpack的打包配置放在根目录下的vue.config.js中,vue-cli2放在build目录中。1)引入插件constGenerateAssetPlugin=require('generate-asset-webpack-plugin');2)定义需要生成的配置内容,配置项定义在cfgJson对象中,插件中使用该函数varcreateServerConfig=function(compilation){//配置需要的API接口letcfgJson={VUE_APP_SERVE_URL:'http://172.16.88.88:60232',//静态图片地址VUE_APP_UPLOADFILE_URL:'http://172.16.88.88:60232'}returnJSON.stringify(cfgJson);}3)在module.exports中调用plugin:添加module.exports中的attributeconfigureWebpack,在configureWebpack的plugins中调用plugin(这里也可以引入其他插件,与vue-cli2方式一致)',fn:(compilation,cb){cb(null,createConfig(compilation))}})]}}3.通过request在main.js文件中创建并存储在本地importaxiosfrom'axios';//接口数据在应用配置文件Vue.prototype.getConfigJson=function(){axios.get("serverconfig.json").then((res)=>{localStorage.setItem("apiUrl",res.data.VUE_APP_SERVE_URL)//接口地址localStorage.setItem("apiImage",res.data.VUE_APP_UPLOADFILE_URL)//静态资源地址}).catch((error)=>{console.log('接口地址未获取',error)})}4.app.vue调用挂载(){this.getConfigJson()},在5.config中使用baseUrl:{dev:localStorage.getItem("apiUrl"),pro:localStorage.getItem("apiUrl")},defaultImageUrl:localStorage.getItem("apiImage"),
