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

相关推荐
killerbasd4 小时前
还是迷茫 5.3
前端·react.js·前端框架
江南十四行11 小时前
ReAct Agent 基本理论与项目实战(一)
前端·react.js·前端框架
谢尔登14 小时前
10_从 React Hooks 本质看 useState
前端·ubuntu·react.js
辰同学ovo14 小时前
从全局登录状态管理学习 Redux
前端·javascript·学习·react.js
光影少年15 小时前
reeact虚拟DOM、Diff算法原理、key的作用与为什么不能用index
前端·react.js·掘金·金石计划
江南十四行15 小时前
ReAct Agent 基本理论与项目实战(二)
前端·react.js·前端框架
摘星编程16 小时前
当AI开始学会“使用工具“——从ReAct到MCP,大模型如何获得真正的行动力
前端·人工智能·react.js
啊哈一半醒18 小时前
React 核心知识点系统总结:从基础语法到高级 API,一篇文章梳理完整学习路线
javascript·学习·react.js
cn_mengbei2 天前
用React Native开发OpenHarmony应用:Reanimated共享元素过渡
javascript·react native·react.js
We་ct2 天前
React 性能优化精讲
前端·javascript·react.js·性能优化·前端框架·html·浏览器