【原】使用webpack打包的后,公共请求路径的配置问题
在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的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打包的后,公共请求路径的配置问题的更多相关文章
- Webpack打包css后z-index被重新计算的解决方法
发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 ! ...
- VUE002. 动态使用webpack打包处理后的静态图片路径({ img: require('xxx.png') })
案例摘要 需求是通过v-for循环渲染数组中数据,其中包括本地包的图片文件.话不多说直接上代码: <a-radio-group class="template-radio"& ...
- 关于webpack打包vue后vendor包过大的问题
因为项目用到了elementUI,打包之后包括vue.axios.elementui之类的加起来有500kb,页面第一次打开会出现一阵白屏显示.在百度过后发现可以使用外链接而不用模块包. 博主使用的外 ...
- webpack打包vue项目,资源路径如何从绝对路径改为相对路径?css中的图片资源如何修改配置?
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- webpack打包 css文件里面图片路径 替换位置
{ test: /\.css$/, use: ExtractTextPlugin.extract({ use: ['css-loader?minimize', 'autoprefixer-loader ...
- webpack打包后访问不到json文件
一.问题描述 在vue中,前端写ajax假数据,用axios将json数据渲染到组件中,开发期间一切正常,webpack打包压缩后,json文件的路径错误,页面访问不到数据,导致渲染失败. 二.预期结 ...
- vue通过webpack打包后怎么运行
1. 成功使用webpack打包完成后会默认得到dist的文件夹 2. dist文件夹中有html与其他的静态文件 3. 在dist文件夹中打开命令窗口或者git,开一个服务器(像anywhere) ...
- Webpack打包进阶
说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...
- webpack打包学习
从上图我们可以看出,webpack 可以将多种静态资源 js.css.sass文件等转换成一个静态文件,以此可以减少页面的请求,从而提高浏览器响应速度 1.安装开发依赖包 npm install we ...
随机推荐
- CSS3——让最后一行显示省略号
代码如下: <!DOCTYPE html> <html> <head> <title></title> <meta charset=& ...
- javascript数组去重的4个方法
Array.prototype.unique1 = function(){//有局限性,1,“1”的情况会被去重,因为存入临时对象时,数组中的值被统一转换成了字符串 var obj = {},newA ...
- 屠龙之路_战胜View&对DataBase猛烈进攻_ThirdDay
避开狮身人面兽攻击的屠龙战士继续前行.突然眼见一黑,战士们进到迷宫里,机智的战士用一根羊毛线绑在迷宫入口处,少年们手握着羊毛线,在迷宫里继续前行.在那样一个拐角处,遇到了恶龙的手下View&D ...
- 使用 screen 管理你的远程会话
文章转载自:https://www.ibm.com/developerworks/cn/linux/l-cn-screen/ 在此只作为笔记使用,不做他用 你是不是经常需要 SSH 或者 telent ...
- [转]Filter实现处理中文乱码,转义html标签,过滤敏感词
原文地址:http://www.cnblogs.com/xdp-gacl/p/3952405.html 在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可 ...
- [转]html js中name和id的区别和使用分析
js中web页面元素的调用可以有两种识别方法:id和name 自己在用的过程中总结一下id和name的使用区别. 一,使用范围 除 BASE, HEAD, HTML, META, SCRIPT, ST ...
- iOS开发--QQ音乐练习,旋转动画的实现,音乐工具类的封装,定时器的使用技巧,SliderBar的事件处理
一.旋转动画的实现 二.音乐工具类的封装 -- 返回所有歌曲,返回当前播放歌曲,设置当前播放歌曲,返回下一首歌曲,返回上一首歌曲方法的实现 头文件 .m文件 #import "ChaosMu ...
- tomcat+javaWeb+spring的一个都市供求管理系统
这个作为自己学习javaweb的第一个小项目,也是跟着视频自己学的,是来自java1234的小锋写的,那边有很多java视频可以作为学习参考哦 , 视频中使用的是tomcat作为后端,也( •̀ ω ...
- JQuery触发radio或checkbox的change事件
在JQuery中,当给radio或checkbox添加一个change事件时,如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了 ...
- 【CodeForces 697B】Barnicle
对科学计数法表示的数,输出其10进制的形式. c++来做,需要考虑这些细节: 当b==0,d==0时,只输出a. 当不需要补零的情况有两种: 一种是刚好是整数,只输出a(注意1.0e1的情况是输出1) ...