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

相关推荐
云上工程笔记5 分钟前
AstraFlow + React/Vite:如何用自然语言开发并部署一个 AI 咖啡网站原型
前端·人工智能·react.js
光影少年1 小时前
React18 对RN 的影响
android·前端·react.js·ios·前端框架
xiaoyan20152 小时前
2026最新款Electron41+React19+AntDesign电脑端后台管理系统Exe
react.js·electron·vite
用户298698530143 小时前
在 React 中使用 JavaScript 将 HTML 转换为图片
javascript·react.js·html
科里 Coralyx4 小时前
CoT Toolformer ReAct:工具调用、推理链与 Agent 的起源
前端·react.js·前端框架
走到天涯海角15 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
晴天161 天前
React 版本迭代解析:从15到19 核心差异-Day40
前端·react.js·前端框架
倾颜1 天前
AI Chat 长会话性能实践:消息虚拟化、动态高度与流式滚动设计
前端·react.js·node.js
天道kabuto1 天前
前端每日知识点:React Fiber 与 AI 流式长文本渲染:从调度原理到工程落地
react.js
光影少年2 天前
react navite跨端项目的痛点、踩过哪些坑、怎么解决
前端·react native·react.js