Create-react-app创建的项目打包后页面空白的解决方法
问题描述:当我们使用create-react-app脚手架创建一个react项目之后,等到项目开发完成想要打包部署时会发现,通过npm run build命令打包后的项目在浏览器端访问时会出现页面空白的情况。解决方法:此类问题一般有两种解决方法,其中第一种也是最常见的,当我们打开浏览器控制台时会发现,当首页空白时浏览器控制台会报一大堆的404资源请求错误,这种情况下很好解决,我们只需要在项目根目录
·
问题描述:
当我们使用create-react-app脚手架创建一个react项目之后,等到项目开发完成想要打包部署时会发现,通过npm run build命令打包后的项目在浏览器端访问时会出现页面空白的情况。
解决方法:
此类问题一般有两种解决方法,其中第一种也是最常见的,当我们打开浏览器控制台时会发现,当首页空白时浏览器控制台会报一大堆的404资源请求错误,这种情况下很好解决,我们只需要在项目根目录下的package.json中添加一行配置即可,如下:
"homepage": "./",
当添加了这一行配置之后重新打包部署,可能很大几率会解决页面空白的问题。但是也有不少的情况还是会存在页面空白,但是此时我们会发现浏览器控制台已经不报错误了,仅仅只是前端页面空白。这个时候我们就要去代码里检查一下使用的路由组件有没有问题,如果你是用的组件是BrowserRouter,那么我们打包部署的项目在浏览器端解析时就会出现问题,也就是会出现页面空白的情况,这个时候我们需要将路由组件切换为HashRouter,如下:
import { HashRouter as Router, Route } from 'react-router-dom';
通过以上的优化,我们就会发现页面空白的问题已经得到解决了。
更多推荐
已为社区贡献5条内容
所有评论(0)