React项目打包本地空白问题

背景:当我使用npm run build打包后点开了build中的index.html一片空白,一脸懵,于是打开了控制台。发现以下报错。

问题1. 找不到manifest.json文件,于是打开了打包过后build中的index.html

<link rel="manifest" href="/manifest.json"/> 发现"/manifest.json" 前面少了一个 "."

于是我打开package.json 新增homepage:"."

再次打包,成功在manifest前加上"."

ps:如果homepage:"." 以后出现了/static/js 或者 /static.css 文件找不到可能是打包的缓存可清缓存再试或者使用craco.config 配置以下静态资源路径 './'即可

问题2. 再次打开index.html

额页面404了,于是检查了一下我的路由配置

我使用的是createBrowserRouter,想到我这个项目是H5嵌入到其它平台,不需要与服务端进行渲染(SSR),于是改为createHashRouter

再次打包,并打开index.html 页面渲染正常,问题解决。

相关推荐
我是大卫3 分钟前
【图】React源码解析-第四部分:事件与跨层传递
react.js·源码
张元清39 分钟前
React useReducedMotion Hook:尊重 prefers-reduced-motion(2026)
javascript·react.js
用户298698530143 小时前
前端 Excel 处理进阶:React 中合并与取消合并单元格的实现
前端·javascript·react.js
老王以为3 小时前
Fiber 节点 —— 一个数据结构如何承载整个 React 运行时
前端·react native·react.js
mONESY3 小时前
ReAct 智能体循环与 JavaScript 异步并发原理深度解析
react.js
北辰alk15 小时前
Next.js 全栈开发指南:从项目初始化到生产环境部署
react.js
胡哈20 小时前
React Compiler:让开发者忘掉 memo 这件事
前端·react.js
光影少年1 天前
react navite JSBridge 通信机制、异步通信特点
react native·react.js·掘金·金石计划
ndsc_d1 天前
10分钟搭建B端SaaS数据看板:Paico+TDesign+React实战复盘
前端·人工智能·react.js·ui·前端框架·aigc·tdesign