react history模式下的白屏问题
近期,再用react的时候,由于不想用丑陋的hash,便将路由模式切换成history了,结果带来了一些问题,比如刷新白屏,还有图片加载不出来,这里我们说一下解决方案。
原因
首先,我们说一下造成这一系列现象的原因。
我们在http://localhost:xxxx/这个路径下去刷新页面是没有问题的,一切都显得那么正常,但是当我们换到一个子模块,刷新就会白屏,为什么呢?
我们看到,它会从当前路径下去找bundle.js,为什么?因为HtmlWebpackPlugin插件在帮我们引入bundle.js时,引入的是相对路径
所以,在刷新时,它是相对于现在的url取寻找的。
解决方案
原因一旦清楚,解决方案便呼之欲出了。我们只要想办法让bundle.js的加载路径在刷新的时候,也从根目录开始寻找,而不是跟随当前url即可。
1.output配置加入publicPath
output: {
filename: 'assets/js/bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: "/"
}
publicPath是什么意思呢?官网中有这么一句话
webpack-dev-server 也会默认从 publicPath 为基准,使用它来决定在哪个目录下启用服务,来访问 webpack 输出的文件。
简单理解,你的静态资源,都会从此路径下开始加载
publicPath: "/" //加载路径‘/assets/js/bundle.js’
这样,每次刷新都会从根目录开始加载,就不会丢失我们的bundle.js了。图片加载不出来也是这个问题。
2.webpack-dev-server的historyApiFallback
history模式下,devServer需要配置historyApiFallback为true
devServer: {
historyApiFallback: true
}
注意以上两点,history模式就能正常使用了。如果还有其他原因,欢迎大家补充。
ps:项目部署上服务器后,页面白屏,需要后台进行相关设置,这里不做讨论。
react history模式下的白屏问题的更多相关文章
- IDLE的GUI交互模式下完美清屏
IDLE的GUI交互模式下完美清屏==============================================================================1.首先把 ...
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
一. 异常描述: 本来使用的是vue-router的hash模式,但是hash模式下url需要带“#”符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会 ...
- `vue-router`的`History`模式下的项目发布
背景 脚手架版本号:vue cli 3.x 项目路由:vue-router的History模式 原理:url路由处理逻辑从后端转移到前端. 参考:https://developer.mozilla.o ...
- react native 完美解决启动白屏
先讲下我的RN版本0.58.5 首先安装react-native-splash-screen(目前使用的版本是3.2.0) 项目地址https://github.com/crazycodeboy/re ...
- vue路由history模式下打包node服务器配置
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- vue history模式下出现空白页情况
问题描述: vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: imp ...
- 微信小程序iOS下拉白屏晃动,坑坑坑
感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText ...
- Vue项目history模式下微信分享总结
原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...
- React Native 首次加载白屏优化
RN首次加载都会有个白屏过程,一般都会有500ms+的白屏时间,原生页面开发同样的页面会能够快速显示而在RN页面中有个明显的等待过程,这个会影响用户体验. 1.使用过渡页面 简单处理可以在白屏过程中加 ...
随机推荐
- 微服务SpringCloud+Docker入门到高级实战(教程详情)
第一章 课程介绍和学习路线 1.微服务架构SpringCloud课程介绍 简介:课程介绍和课程大纲讲解,讲课风格和重点内容理解技巧 2.技术选型和学后水平 简介:课程所需基础和技术选型讲解,学完课程可 ...
- 安装配置mysql图文步骤以及配置mysql的环境变量的步骤
MySQL下载地址:http://dev.mysql.com/downloads/installer/ 我的数据库是5.5.21这个版本的.其实可以一直点击next,直到出现第14张图,从这里开始要注 ...
- js浮点数加减乘除
浮点数精确计算 /** ** 加法函数,用来得到精确的加法结果 ** 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果. ** 调用:ac ...
- 16.VUE学习之-v-show的使用与v-if的差异对比
v-show的使用与v-if的差异对比 相同点: 都可以达到隐藏和显示的效果. 不同点: v-show 会用display:none 来隐藏元素节点,推荐使用这种方式 v-if 会移除节点,可以配合v ...
- web项目中信息显示不全
如果页面的信息加载不全: 1. 可能是SQL写的不对,查的SQL写错了会导致信息展示问题 2. 或者是分页的初始化设置 过小导致,关于分页xxxPage.java的实体类初始值的pageSize设置的 ...
- python编写定时执行脚本
前几天在抓博客园文章,打算每天抓10条最新的,所以就在脚本中加了定时让它在每天凌晨四点中时执行,但是昨天发现,报错了: 显示是远程主机强制关闭了一个链接, 原因是:mysql数据库默认当连续8小时不对 ...
- MySQL查询数据库中表名或字段名
查询数据库中所有表名 select table_name from information_schema.tables where table_schema='csdb' and table_type ...
- unity安装记录
官网直接下载(http://unity3d.com/cn/) 下载完后,会要求输入账号密码.我是先在官网进行一个账号注册,然后登陆即可. 首先会要你输入一个已有的邮箱,进行认证.进入自己邮箱,点击链接 ...
- 使用HTTP协议访问网路
使用HTTP协议访问网路 一.使用HttpURLConnection //new一个URL对象 URL url = new URL("http://www.qq.com");//千 ...
- BZOJ 4393: [Usaco2015 Dec]Fruit Feast
DP #include<cstdio> using namespace std; int T,A,B,F[5000005],G[5000005]; int main(){ scanf(&q ...