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

相关推荐
前端小盆友1 小时前
从零实现一个GPT 【React + Express】--- 【5】实现网页生成能力
gpt·react.js·express
Lazy_zheng2 小时前
React 核心 API 全景实战:从状态管理到性能优化,一网打尽
前端·javascript·react.js
Jayconscious2 小时前
React源码解析(五):hook原理
前端·react.js·源码阅读
心.c4 小时前
react当中的this指向
前端·javascript·react.js
多啦C梦a4 小时前
🪄 这么优雅?`useContext` + 自定义 Hooks:优雅管理全局状态,从主题切换说起
前端·javascript·react.js
海底火旺5 小时前
useState:批处理与函数式更新
前端·react.js·面试
G等你下课5 小时前
如何优雅地组织业务逻辑?自定义 Hook 全解析
前端·react.js
mrsk5 小时前
React useContext 实战指南:打造主题切换功能
前端·react.js·面试
小公主5 小时前
别再用 props 一层层传了!React useContext 真正用法与 useState 深度解析
前端·react.js
然我8 小时前
React 中 useEffect 到底怎么用才不会踩坑?全流程详解 + 实例讲透副作用
前端·javascript·react.js