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

公共变量是这样

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

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

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

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

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

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

在我的public.js的代码改为

$.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打包的后,公共请求路径的配置问题的更多相关文章

  1. Webpack打包css后z-index被重新计算的解决方法

    发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 ! ...

  2. VUE002. 动态使用webpack打包处理后的静态图片路径({ img: require('xxx.png') })

    案例摘要 需求是通过v-for循环渲染数组中数据,其中包括本地包的图片文件.话不多说直接上代码: <a-radio-group class="template-radio"& ...

  3. 关于webpack打包vue后vendor包过大的问题

    因为项目用到了elementUI,打包之后包括vue.axios.elementui之类的加起来有500kb,页面第一次打开会出现一阵白屏显示.在百度过后发现可以使用外链接而不用模块包. 博主使用的外 ...

  4. webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  5. webpack打包 css文件里面图片路径 替换位置

    { test: /\.css$/, use: ExtractTextPlugin.extract({ use: ['css-loader?minimize', 'autoprefixer-loader ...

  6. webpack打包后访问不到json文件

    一.问题描述 在vue中,前端写ajax假数据,用axios将json数据渲染到组件中,开发期间一切正常,webpack打包压缩后,json文件的路径错误,页面访问不到数据,导致渲染失败. 二.预期结 ...

  7. vue通过webpack打包后怎么运行

    1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...

  8. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

  9. webpack打包学习

    从上图我们可以看出,webpack 可以将多种静态资源 js.css.sass文件等转换成一个静态文件,以此可以减少页面的请求,从而提高浏览器响应速度 1.安装开发依赖包 npm install we ...

随机推荐

  1. P和NP问题

    1. 通俗详细地讲解什么是P和NP问题 http://blog.sciencenet.cn/blog-327757-531546.html   NP----非定常多项式(英语:non-determin ...

  2. mac搭建mamp环境

    1 先安装homebrew; 执行:cd /usr/local; 非root用户执行: ruby -e "$(curl -fsSL https://raw.githubusercontent ...

  3. 十天冲刺---Day7

    站立式会议 站立式会议内容总结: 燃尽图 照片 两个人编码其实效率挺高的.但是在一些方面,比如说页面UI的编写,会非常吃力,很难达到自己的效果. 由于埋头在编码,所以issues的增加随之停止. 有点 ...

  4. Maven的生命周期和插件

    首先解释下maven build等 Maven build是这个插件让你自己去配置执行目标的.Maven clean 清除上一次Maven执行的结果Maven generate-sources会根据p ...

  5. Android Intent应用

    1. 显示Intent // 直接设置Content和到下一个的Actvity的名字 Intent i = new Intent(MainActivity.this, AnotherAty.class ...

  6. 【BZOJ 2154】Crash的数字表格

    制杖了,,,求前缀和的时候$i×i$是int,然后当$i=10^7$时就喜闻乐见地爆int了,,,对拍之后查了一个下午的错才发现这个问题,,,最后枚举用的变量全都强行加上long long才A掉 #i ...

  7. 线段树 poj3225

    U:把区间[l,r]覆盖成1I:把[-∞,l)(r,∞]覆盖成0    D:把区间[l,r]覆盖成0C:把[-∞,l)(r,∞]覆盖成0 , 且[l,r]区间0/1互换S:[l,r]区间0/1互换 因 ...

  8. 51nod 1109 bfs

    给定一个自然数N,找出一个M,使得M > 0且M是N的倍数,并且M的10进制表示只包含0或1.求最小的M.   例如:N = 4,M = 100. Input 输入1个数N.(1 <= N ...

  9. hdu1161 欧拉路

    欧拉路径是指能从一个点出发能够“一笔画”完整张图的路径:(每条边只经过一次而不是点) 在无向图中:如果每个点的度都为偶数 那么这个图是欧拉回路:如果最多有2个奇数点,那么出发点和到达点必定为该2点,那 ...

  10. KM算法及其优化的学习笔记&&bzoj2539: [Ctsc2000]丘比特的烦恼

    感谢  http://www.cnblogs.com/vongang/archive/2012/04/28/2475731.html 这篇blog里提供了3个链接……基本上很明白地把KM算法是啥讲清楚 ...