问题描述:

当我们使用create-react-app脚手架创建一个react项目之后,等到项目开发完成想要打包部署时会发现,通过npm run build命令打包后的项目在浏览器端访问时会出现页面空白的情况。

解决方法:

此类问题一般有两种解决方法,其中第一种也是最常见的,当我们打开浏览器控制台时会发现,当首页空白时浏览器控制台会报一大堆的404资源请求错误,这种情况下很好解决,我们只需要在项目根目录下的package.json中添加一行配置即可,如下:

"homepage": "./",

当添加了这一行配置之后重新打包部署,可能很大几率会解决页面空白的问题。但是也有不少的情况还是会存在页面空白,但是此时我们会发现浏览器控制台已经不报错误了,仅仅只是前端页面空白。这个时候我们就要去代码里检查一下使用的路由组件有没有问题,如果你是用的组件是BrowserRouter,那么我们打包部署的项目在浏览器端解析时就会出现问题,也就是会出现页面空白的情况,这个时候我们需要将路由组件切换为HashRouter,如下:

import { HashRouter as Router, Route } from 'react-router-dom';

通过以上的优化,我们就会发现页面空白的问题已经得到解决了。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐