展开本页目录
开始前准备什么
- 下载独立练习包，使用 Node.js 20+；参考源码没有 npm 第三方依赖，React 库仅 W03/W11 随包提供。
- 在自己的独立目录中运行；所有业务和身份均为虚构教学数据。
- 目标 App、模型、账号授权与外部发布需按本页真实边界另行操作；不使用真实客户资料练习。
- 复制故障样本并保留第一条错误
- 确认预览服务是否真的启动
- 将缺失依赖与网络失败分开
- 定位运行时的具体源码行
- 每次只修复一个原因
- 返回 bolt.diy 对照相同证据
- 回读原页面而不是只看命令退出
独立原创源码、输入、逐步说明、运行脚本和真实本地检查；不含账号密钥或模型权重。
包含七步具体操作、来源与本题未执行范围。
真实执行本题纯函数/结构断言，不代替目标 App、模型、权限或发布测试。
离线 npm ci、check、build 与 HTTP 内容类型回读结果。
1. 复制故障样本并保留第一条错误
broken-dependency.mjs 引入不存在的包，broken-start/package.json 缺少 dev，broken-runtime.mjs 访问 undefined 字段。它们是专门构造的原创负例，不是从真实用户项目采集。
bash
node reproduce.mjs
2. 确认预览服务是否真的启动
从启动命令开始：没有 dev 脚本时 npm run dev 会在提供页面前退出。先核对 package.json，不在浏览器里反复刷新来修复服务未启动。本题的原始 stderr 保存在 logs/start.txt。
bash
npm --prefix broken-start run dev3. 将缺失依赖与网络失败分开
MODULE_NOT_FOUND 指向缺失的示例包，不自动说明网络不可用。真实项目先核对依赖声明、锁文件、安装退出码，再检查版本或镜像；不随意清空全部锁文件。
bash
node broken-dependency.mjs4. 定位运行时的具体源码行
TypeError 出现在 broken-runtime.mjs 的 profile.name。先检查数据为空时的渲染分支，再给出明确空状态；把整个页面包进 catch 并隐藏错误不能完成修复。
bash
node broken-runtime.mjs5. 每次只修复一个原因
fixed-dependency.mjs 使用随包的本地模块，fixed-start/package.json 增加可运行 dev，fixed-runtime.mjs 使用显式空状态。reproduce.mjs 检查三例原始退出码非零、修复后为零，并保存真正输出。
bash
node reproduce.mjs
6. 返回 bolt.diy 对照相同证据
在实际 WebContainer 中区分安装日志、启动日志、终端端口和浏览器错误。本文 FAQ 引用官方排查入口；本机的三个例子仅训练诊断顺序，不声称覆盖沙箱、跨域和所有兼容问题。
7. 回读原页面而不是只看命令退出
本题恢复参考页显示三个故障的实际验证摘要。真实应用修好后要回到同一路由检查数据和交互，不能把 npm 退出 0、HTTP 200 或白色截图单独当完整恢复证明。
bash
npm run dev
怎样确认已经完成
- 输入、实际输出和模型/工具未执行范围分开记录，不把手写参考当模型结果。
- 真实运行本题 npm ci / check / build，并回读独立目录的页面与资源。
- 按本题七步核对负例、手机布局、数据或路由；外部服务单独保存实际验证结果。
常见问题
AI生成网站打不开，是否都要重装依赖？
不是。先区分安装失败、启动失败和页面运行时错误，本题三组故障分别验证，避免一次改多个变量。
bolt.diy 预览白屏，为什么终端没有错误？
可能是浏览器运行时或资源加载错误。终端和浏览器是不同证据面；本机示例不覆盖所有 WebContainer 限制。