H5W3
当前位置:H5W3 > 其他技术问题 > 正文

实际项目运用中,webpack对需要在部署后可修改的配置文件如何打包

初学者。用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是否也有相类似的机制或者方法,可以把这样的可能发生运行时修改的配置进行保留,便于运维时可以方便的修改?
或者在实际项目中,这样的配置一般是怎么操作的?

回答:

从其它问题中找了一个方法,暂时算是解决。
参考:webpack打包同时,如何生成一个带有当前hash值的json?

用了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被篡改了吧? 

本文地址:H5W3 » 实际项目运用中,webpack对需要在部署后可修改的配置文件如何打包

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址