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

相关推荐
Zero1017134 小时前
【详解pnpm、npm、yarn区别】
前端·react.js·前端框架
赵大仁6 小时前
React Native 与 Expo
javascript·react native·react.js
肠胃炎9 小时前
React构建组件
前端·javascript·react.js
邝邝邝邝丹9 小时前
React学习———React.memo、useMemo和useCallback
javascript·学习·react.js
GISer_Jing10 小时前
React useState 的同步/异步行为及设计原理解析
前端·javascript·react.js
AC-PEACE13 小时前
小程序初始化加载时间优化 步骤思考与总结
react.js·小程序·前端框架
up·14 小时前
react+html-docx-js将页面导出为docx
react.js
刺客-Andy15 小时前
React 第三十九节 React Router 中的 unstable_usePrompt Hook的详细用法及案例
前端·javascript·react.js
LuckyLay17 小时前
React百日学习计划-Grok3
前端·学习·react.js
呵呵哒( ̄▽ ̄)"19 小时前
React - 编写选择礼物组件
前端·javascript·react.js