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

相关推荐
Darling噜啦啦1 小时前
别再逐层传 Props 了!useContext + 自定义 Hook 彻底搞定 React 跨层通信
react.js
先吃饱再说1 小时前
层层传递太“痛”了:useContext 给 React 组件装了个“无线遥控器”
前端·react.js·前端框架
To_OC2 小时前
从一个颜色选择器说起:我终于整明白了 React+TS 里的 model 与 api 分层
前端·react.js·typescript
嘟嘟07175 小时前
学了 useContext 还是不理解?从 prop drilling 到 useMouse 的一次完整复盘
前端·javascript·react.js
触底反弹5 小时前
JS 运行原理与 Event Loop:从 Web Worker 实战说起
前端·javascript·react.js
喜欢睡觉6 小时前
跨越组件层级的"任意门":React Context 与自定义 Hooks 完全入门指南
react.js
moMo6 小时前
前端路由,其实就是三个对象在演戏
前端·react.js
烬羽6 小时前
组件拆了,逻辑没拆——自定义 Hook 才是 React 业务逻辑的正当归属
react.js·架构·typescript
小月土星6 小时前
自定义业务 Hook:从零解剖一个 React + TypeScript Todo 应用:用金字塔思维看透前端架构
react.js·架构·前端框架
Goodbye6 小时前
React 核心概念实战:从组件化思维到本地存储持久化
react.js