使用create-react-app的项目在build后显示一片空白

最新推荐文章于 2024-08-22 10:37:35 发布
最新推荐文章于 2024-08-22 10:37:35 发布
阅读量614 收藏
点赞数 1
文章标签： react 前端框架 打包
不许偷代码哦，一键三连以后我的代码就是你的代码！！！
本文链接：https://blog.csdn.net/youyzq/article/details/130974692
版权
项目打包后无法直接打开，出现白屏是因为使用了绝对路径导致找不到资源。解决方案包括在package.json中设置`homepage`为`./`，将BrowserRouter替换为HashRouter，然后重新打包，这样项目能正确找到页面并正常打开。
摘要由CSDN通过智能技术生成

打包以后无法直接打开，打包好的页面是白屏在这里插入图片描述

打开以后是
在这里插入图片描述

为什么会出现这个问题呢？

因为现在的是绝对路径，找的是当前文件夹下的的项目，因为没有所以就会显示白屏

如何解决这个问题？

在这里插入图片描述
找到package.json文件
在这里插入图片描述
设置首页位置

“homepage”: “./”,


找到全局的index.js文件
在这里插入图片描述

BrowserRouter替换成HashRouter

在这里插入图片描述
然后再重新打包项目，重新打开就好了
在这里插入图片描述
url没变，但是他找到了页面

Youyzq
关注
【React】打包部署到Gitpage流程，及空白页面问题
weixin_44500371的博客
08-31 732
【React】脚手架开发，打包部署到Gitpage的流程，及空白页面问题（router根路径问题）
create-react-app修改为多页面支持的方法
12-03
完成上述步骤后，你可以通过`yarn start`启动开发服务器，或使用`yarn build`执行生产构建，此时你的create-react-app项目就已经支持多页面应用了。这种方法避免了创建新的工作流或者采用SSR（服务器端渲染）的复杂...
Create-react-app创建的项目打包后页面空白的解决方法
X北辰北的博客
11-06 2296
问题描述： 当我们使用create-react-app脚手架创建一个react项目之后，等到项目开发完成想要打包部署时会发现，通过npm run build命令打包后的项目在浏览器端访问时会出现页面空白的情况。 解决方法： 此类问题一般有两种解决方法，其中第一种也是最常见的，当我们打开浏览器控制台时会发现，当首页空白时浏览器控制台会报一大堆的404资源请求错误，这种情况下很好解决，我们只需要在项目根目录下的package.json中添加一行配置即可，如下： "homepage": "./",
React布署打包到服务器上后，页面显示空白
最新发布
u011714807的博客
08-22 339
react项目路由用的是BrowserRouter，部署打包到服务器后打开报错或显示空白，可以参考以下解决问题方法。
解决create-react-app打包后, 本地打开页面空白的问题
qq_33715850的博客
12-29 3166
解决create-react-app打包后, 本地打开页面空白的问题
React打包后页面空白
gyjhgyt的博客
08-04 205
react项目打包出现空白页面
丁七岁的博客
07-13 703
打包结束，浏览器访问index.html这个页面 展示的是空白 其实也是路径问题： 在package.json里面添加这么一行代码： "homepage": "." 重新yarn build 就可以了
react以create-react-app为基础创建项目
11-30
- **避免构建时清理目录**：在`build.js`中取消`fs.emptyDirSync(paths.appBuild)`的注释，以保留旧文件。 ### 外部依赖处理 如果你希望从CDN引入React等库作为全局变量，可以配置`webpack.config.prod.js`的`...
create-react-kotlin-app：使用没有构建配置的Kotlin创建React应用
02-03
如果您已经安装了create-react-app或正在使用npx则可以跳过此步骤。 您需要在计算机上使Node> = 6 。 您可以使用在不同项目的Node版本之间轻松切换。 该工具不采用Node后端。 仅创建Create Kot
详解在create-react-app使用less与antd按需加载
10-17
以上知识点详细描述了如何在基于 `create-react-app` 的项目中，通过一系列配置和工具，实现 `less` 预处理器的使用以及 `antd` 组件库的按需加载和自定义主题功能。这些步骤不仅提升了项目的性能，也增加了开发的...
create-react-app-router-redux:一个带有`react-router`和`redux`的`create-react-app`的基本项目模板。
04-10
使用和模板通过引导了该项目。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn...
React项目打包之后显示空白页
Leo_DLi的博客
04-29 1930
环境说明: React 16 React 官网创建项目方式 npm run build 打包之后, 页面空白. 解决方案: package.json 文件中添加 homepage 字段:
React项目build打包后，页面空白的解决方案
苍老师背后的男人
08-23 2310
页面虽然可以正常访问，但如果在地址栏 直接输入URL 回车，就会变成404页面的。这种情况没关系，当你最后把项目 部署到正式服务器上时，在nginx中配置以下代码即可。重新 build 之后，启用本地服务 打开 index.html 文件（本文中用 Live Server 插件启用本地服务，你也可以用其它的），如下图所示。React项目执行 build 命令后，在本地服务器打开页面。下的 package.json 文件，添加如下代码。打开后，页面可正常访问，如下图所示。
react项目打包后，浏览器直接打开dist/index.html页面出现空白
zsy_1991的博客
03-10 8768
问题解决 下面 umi 的两个配置解决了问题。 { publicPath: './', history: { type: 'hash', } } 问题描述 使用umi + react + ant design 搭建React web项目，使用的config.ts 配置如下： import { defineConfig } from 'umi'; import defaultSettings from './defaultSettings'; import proxy fr
React（四）create-react-app IE打开以及打包部署后页面空白问题
zhengjie0722的博客
04-11 1553
（1）本地测试 本地测试环境解决IE页面空白问题需要安装babel-polyfill yarn add babel-polyfill npm install babel-polyfill 然后再主入口文件index.js中引入babel-polyfill包 import 'babel-polyfill' （2）服务器部署 在package.json文件中添加 "...
React 打包后白屏，资源找不到
LueLueLue77的博客
07-28 1394
记录下最近在打包react项目的时候遇到页面白屏，资源找不到的情况
react打包页面打开空白
weixin_39782183的博客
03-09 975
当第一次使用create-react-app开发项目的时候，遇到了一个小坑，就是npm run start开发环境运行项目的时候一切正常，但是在npm run build的时候会发现打包后打开index.html显示空白，这个问题其实vue也有。 解决办法 在package.json中增加配置 "homepage": "." 目前如果能正常打开的话那很好，但是可能会出现说就算配置了homepag...
React项目打包发布到Tomcat页面空白解决办法
克格莫（有需要的私信）
06-18 1399
按照教程在APP.js配置了路由，然后命令行执行cnpm run build打包，生成build目录，将其发布到SSM的webContent目录下，启动SSM项目后，访问index.html无内容。 原因：APP.js里是这样写的： //根组件 import React from 'react'; import { BrowserRouter as Router,Route} from 'react-router-dom'; import Login from '../commponents/logi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值