首页 > 代码库 > 使用webpack打包的后,公共请求路径的配置问题

使用webpack打包的后,公共请求路径的配置问题

在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量

技术分享

公共变量是这样

技术分享

在其他地方使用ajax时,我们就这样使用

技术分享

这种用法在平时的项目中是没有问题的。但是因为公司最近的项目都是用react来用,然后用webpack来打包。

webpack打包后,public这个js也被打包进了每个组件中去。如果需要修改的话,要么就在react打包后的每个js文件中修改,要么就是在public.js中修改你的公共

路径,然后再打包一次。这样会显得很麻烦。

 

解决方法就是创建一个config.json文件,并将其放在根目录下,因为webpack不会将你的json文件也打包进去,然后再config.json中写

1
2
3
{
    "urlContent":"http://www.dtvalue.com/consultation_market/"
}

在我的public.js的代码改为

1
2
3
4
5
6
7
8
9
10
11
$.urlContent="http://"+window.location.host+"/consultation_market/";
$.ajax({
      url:‘config.json‘,
      async:false,
      type:‘get‘,
      success:function(rs){
        if(rs.urlContent){
         $.urlContent=rs.urlContent ;
        }
     }
});

 这样,用webpack后,当我需要修改我的公共路径时,就不需要这么麻烦,只需要修改我的config.json里的代码即可

在这里,$.ajax要改为同步,而不是异步,即 async改为false;


使用webpack打包的后,公共请求路径的配置问题