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 页面渲染正常,问题解决。

相关推荐
liuchangng19 小时前
React 19 + Vite 6 实战:从教材 PDF 到 866 词间隔重复单词 App
前端·react.js·pdf·vite·开源项目
鸿蒙开发1 天前
Three.js 首帧卡顿排查:compileAsync 之后,为什么还会停一下?
react.js·three.js
小李科技2 天前
【性能优化】事件委托:目标定位与 React/Vue 实战
前端·vue.js·react.js·面试·性能优化·前端框架
csj502 天前
前端基础之《React(16)—Modal组件封装》
前端·react.js
ZoeLandia4 天前
React11:数据请求与 TanStack Query
前端·react.js·typescript·react
瓦瓦gogo4 天前
实习中接触前端开发后,我开始了解 React
前端·react.js·前端框架
ZoeLandia5 天前
React08:自定义 Hook
开发语言·前端·react.js·typescript
空中湖6 天前
用 React 写数据大屏:为什么我不建议用图表库
前端·react.js·前端框架
来一首_We_go8 天前
React Flow Pro 高级交互实现
前端·react.js
weedsfly8 天前
React 不可变数据:为什么页面“明明数据变了却不更新
前端·javascript·react.js