问 题

初学者。用Vue开发前端，webpack打包。

在实际应用中，对于一些需要在部署到服务器后可能需要修改的配置项，一般是怎么操作的？

打个比方，前端vue中需要调用的服务webAPI的url，写在配置变量APIURL中，我看教程和网上的例子，建议做法是在config木料下的prod.env.js 和dev.env.js里面去分别指定APIURL，可以达到开发和部署不用频繁手动修改url的目的。

但是，如果在npm run build 生成dist后，这个配置也被写死了，传到运行的前端服务器上后，假设某次，api服务器的ip修改了，改动只是更新下这个url，但是却需要会到前端源码，修改prod.env.js的APIURL后，在重新npm run build,然后再把整个dist再重新传到前端服务器，才可以。

以前用过asp.net，一般这样的配置可放在web.config里面，这个改动只要在服务器端编辑修改下web.config的url，重启web服务即可生效。

请教大神，webpack是否也有相类似的机制或者方法，可以把这样的可能发生运行时修改的配置进行保留，便于运维时可以方便的修改？

或者在实际项目中，这样的配置一般是怎么操作的？

解决方案

用了generate-asset-webpack-plugin 这个插件，

在webpack.prod.conf.js中去生成configServer.json文件，让其在build的时候输出：

var GenerateAssetPlugin=require('generate-asset-webpack-plugin');

var createServerConfig=function(compilation){

//console.log("info from GenerateAssetPlugin:");

//console.log(compilation);

let cfgJson={ApiUrl:"192.168.11.90"};

return JSON.stringify(cfgJson);

}

//在plugins:[]中

new GenerateAssetPlugin({

filename: 'serverconfig.json',

fn: (compilation, cb) => {

cb(null, createServerConfig(compilation));

},

extraFiles: []

})

然后，在用axios，get一下这个json

getConfigJson(){

axios.get("serverconfig.json").then((result)=>{

console.log('read from json');

console.log(result);

}).catch((error)=>{console.log(error)});

}

入口main.js的时候，去调用一下这个getConfigJson(),算是把配置读到了。

费了半天劲，就是为了可以在server端可以有个可以用记事本随时修改的serverConfig.json

供自己和有同样需求的人参考。望有实际项目经验的分享下其它的方法。

ps：自问：这个会不好不安全？把服务api的url的暴露出来了，浏览器地址只要请求这个json，配置岂不是都看到了？

自答：如果害怕暴露，觉得webpack封装起来比较安全，那浏览器调试时，随便看下http请求也就知道url了，没有费更多的精力，所以应该和安全不安全没啥关系，就是怕有写权限json被篡改了吧？

扫一扫关注IT屋

微信公众号搜索 “ IT屋 ” ，选择关注与百万开发者在一起