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

相关推荐
LFly_ice2 小时前
学习React-10-useTransition
前端·学习·react.js
知识分享小能手2 小时前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
wordbaby3 小时前
Hooks的革命:让React的非UI逻辑也能像UI组件一样自由复用和组合
前端·react.js
拜无忧3 小时前
【教程】Vue中级转React终极指南-理解Vue和React的差异
前端·vue.js·react.js
NeverSettle_3 小时前
2025年React 18 + React 19源码深度解析
javascript·react.js
卸任4 小时前
Electron运行环境判断(是否在虚拟机中)
前端·react.js·electron
EndingCoder4 小时前
Electron 高级 UI:集成 React 或 Vue.js
react.js·ui·electron·前端框架
江城开朗的豌豆4 小时前
前端数据流之争:React与Vue的"内心戏"大揭秘
前端·javascript·react.js
江城开朗的豌豆5 小时前
前端路由暗战:React与Vue的导航哲学对决
前端·javascript·react.js
博客zhu虎康14 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js