在 React 应用中通过 iframe 嵌入独立 HTML/JS 游戏时，本地开发正常但生产环境 404，根本原因在于静态资源路径未按生产构建规则配置；需将游戏目录置于 public 下并使用目录路径（而非具体 HTML 文件）作为 iframe src。
在 react 应用中通过 iframe 嵌入独立 html/js 游戏时，本地开发正常但生产环境 404，根本原因在于静态资源路径未按生产构建规则配置；需将游戏目录置于 `public` 下并使用目录路径（而非具体 html 文件）作为 iframe `src`。
在 React 项目中嵌入独立的 HTML/JS 游戏（如 Tetris）是一种常见需求，但容易在部署后出现 404 错误——尤其在 Render、Vercel 或 Netlify 等平台。问题核心在于：React 开发服务器（react-scripts start）与生产构建（react-scripts build）对静态资源的解析机制不同。
本地开发时，Webpack Dev Server 可能“宽容”地响应 /src/StandloneGames/Tetris/index.html 这类路径请求；但生产环境打包后，所有静态资源必须位于 public 目录下，且仅支持基于 public 根目录的扁平化路径访问。/src/... 路径在构建后完全不存在，因此必然 404。
✅ 正确做法如下：
将游戏文件移至 public 目录
将整个 Tetris 文件夹（含 index.html、game.js、style.css 等）复制到 public/StandloneGames/Tetris/。确保 public/StandloneGames/Tetris/index.html 可被直接访问（例如：访问 https://your-app.com/StandloneGames/Tetris/ 应返回该 HTML）。更新 iframe src 为目录路径，而非具体 HTML 文件
浏览器访问目录路径（如 /StandloneGames/Tetris/）时，会自动查找并加载该目录下的 index.html（前提是 Web 服务器配置了默认索引文件）。这是标准行为，也是生产环境唯一可靠的方式。
import styled from "styled-components";
// ✅ 正确：路径以 / 开头，指向 public 下的目录
const GAME_URL = "/StandloneGames/Tetris/";
const Tetris = () => {
return (
<TetrisWrapper>
<div>
<iframe
src={GAME_URL}
className="iframe"
title="Tetris Game"
sandbox="allow-scripts allow-same-origin allow-popups"
loading="lazy"
/>
</div>
</TetrisWrapper>
);
};
export default Tetris;⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要写 "/StandloneGames/Tetris/index.html" —— 某些 CDN 或静态托管服务（如 Render 的 Nginx 配置）可能不支持直接暴露 .html 扩展名路径，或因缓存/重定向策略导致失败；
- 必须使用绝对路径（以 / 开头），避免相对路径在路由嵌套时失效；
- 添加 sandbox 属性提升安全性（尤其对第三方游戏代码），至少启用 allow-scripts 和 allow-same-origin；
- 建议添加 title 属性以满足无障碍访问要求；
- 若游戏依赖 fetch、localStorage 或 Canvas API，请确认其脚本在 iframe 内上下文可正常执行（无跨域或权限限制）。
? 补充验证：部署前，可在本地构建后验证路径是否有效：
npm run build npx serve -s build # 然后访问 http://localhost:5000/StandloneGames/Tetris/ —— 应正常加载游戏
遵循以上规范，即可确保独立游戏在 React 生产环境稳定、安全、可维护地运行。
