近期,再用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模式下的白屏问题的更多相关文章

  1. IDLE的GUI交互模式下完美清屏

    IDLE的GUI交互模式下完美清屏==============================================================================1.首先把 ...

  2. 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题

    一. 异常描述: 本来使用的是vue-router的hash模式,但是hash模式下url需要带“#”符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会 ...

  3. `vue-router`的`History`模式下的项目发布

    背景 脚手架版本号:vue cli 3.x 项目路由:vue-router的History模式 原理:url路由处理逻辑从后端转移到前端. 参考:https://developer.mozilla.o ...

  4. react native 完美解决启动白屏

    先讲下我的RN版本0.58.5 首先安装react-native-splash-screen(目前使用的版本是3.2.0) 项目地址https://github.com/crazycodeboy/re ...

  5. vue路由history模式下打包node服务器配置

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  6. vue history模式下出现空白页情况

    问题描述:   vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: imp ...

  7. 微信小程序iOS下拉白屏晃动,坑坑坑

    感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText ...

  8. Vue项目history模式下微信分享总结

    原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...

  9. React Native 首次加载白屏优化

    RN首次加载都会有个白屏过程,一般都会有500ms+的白屏时间,原生页面开发同样的页面会能够快速显示而在RN页面中有个明显的等待过程,这个会影响用户体验. 1.使用过渡页面 简单处理可以在白屏过程中加 ...

随机推荐

  1. python剑指offer 顺时针打印指针

    题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数 ...

  2. CUDA编程时,线程块的处理方法

  3. JavaScript深拷贝与浅拷贝的理解

    个人是这么理解深拷贝和浅拷贝的:就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力. 一起看看我举的浅拷贝栗子: let ...

  4. Mint UI文档

    Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...

  5. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  6. has value '1.8', but '1.7' is required

    使用java7,自己又想在空闲时间学一些java8的新特性,故在安装完1.7之后又安装了1.8 eclispe在启动时报’has value ‘1.8’,but’1.7’ is required’的错 ...

  7. 【树状数组】CF961E Tufurama

    挺巧妙的数据结构题(不过据说这是一种套路? E. Tufurama One day Polycarp decided to rewatch his absolute favourite episode ...

  8. Android 有些机型hint不显示

    这个问题就是有些手机型号,hint字体正好和你的背景色一样,不如你的背景色是白色, 因为大多数的系统,hint都是灰色,所以可以显示,有些手机他妈的就是hint默认字体是白色,结果显示不出来. 那么就 ...

  9. laravel5.2总结--数据填充

      1 生成一个seeder文件 你可以通过 make:seeder artisan命令来生成一个 Seeder.所有通过框架生成的 Seeder 都将被放置在 database/seeds 路径: ...

  10. 34、Java集合框架List,Map,Set等全面介绍(转载)

      Java Collections Framework是Java提供的对集合进行定义,操作,和管理的包含一组接口,类的体系结构.   Java集合框架的基本接口/类层次结构: java.util.C ...