react白屏如何解决

本篇内容主要讲解“react白屏如何解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react白屏如何解决”吧! react白屏的原因是HtmlWebpackPlugin插件在引入bundle.js时，引入的是相对路径，其解决办法：1、在output配置中加入publicPath；2、在history模式下，将historyApiFallback设置为true即可。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的historyApiFallbackhistory模式下，devServer需要配置historyApiFallback为true

devServer:{
historyApiFallback:true
}

注意以上两点，history模式就能正常使用了。到此，相信大家对“react白屏如何解决”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: Angular组件间进行通信的方法有哪些

这篇“Angular组件间进行通信的方法有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Angular组件间进行通信的方法有哪些”文章吧。相…