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

相关推荐
Highcharts.js4 小时前
React 图表如何实现下钻(Drilldown)效果
开发语言·前端·javascript·react.js·前端框架·数据可视化·highcharts
发现一只大呆瓜8 小时前
React-深度拆解 React路由:从实战进阶到底层原理
前端·react.js·面试
发现一只大呆瓜8 小时前
React-手把手带你实现 Keep-Alive 效果
前端·react.js·面试
张一凡9310 小时前
重新理解 React 状态管理:用类的方式思考业务
前端·react.js
codingWhat12 小时前
从 React 无痛过渡到 React Native
react native·react.js
ETA812 小时前
状态管理没那么复杂:手写实现 Zustand 核心逻辑
前端·react.js
FanetheDivine12 小时前
在react中使用signal
vue.js·react.js
We་ct13 小时前
React Hooks 核心原理
前端·react.js·链表·前端框架·reactjs·hooks
~无忧花开~13 小时前
React元素渲染:核心概念全解析
开发语言·前端·javascript·react.js
QD_ANJING14 小时前
2026年大厂前端高频面试原题-React框架200题
开发语言·前端·javascript·react.js·面试·职场和发展·前端框架