本地运行 Context Engineering

用这个页面在你的电脑上运行提取出来的总结挑战。你需要安装它的锁定依赖包，为 Vite 调整两个仅限 Scrimba 的环境读取，然后将浏览器项目连接到 OpenRouter。通用的本地运行课程项目指南详细讲解了共享的 Node 和 npm 设置。

你首先需要的东西

安装一个受支持的 Node.js LTS 版本。建议使用 Node 24，它包含 npm。

检查这两个命令是否都能工作：

$ node --version
v24.18.0
$ npm --version
11.18.0

如果任何一个命令显示"command not found"，完成 Node 的安装后再继续。

你还需要一个 OpenRouter API 密钥和一个账户可用的模型 ID。使用一个有低消费限额的临时密钥，因为这个学习项目会在浏览器中运行供应商请求。

Juno你首先需要的东西 安装 Node.js LTS，检查 node --version 和 npm --version 都能打印出版本号后再继续。然后准备一个有低消费限额的临时 OpenRouter 密钥。我曾经花了一个下午调试一个项目，结果才发现 Node 根本没有装好，所以这十秒钟的检查是值得的！

Juno你首先需要的东西 每一个供应商请求都会带着你的 OpenRouter 密钥离开浏览器，所以要用临时密钥并设置低消费限额。在 OpenRouter 仪表板上，确认你的账户可以使用那个模型 ID，这样后面就不会遇到奇怪的 404 错误。

Juno你首先需要的东西 供应商调用运行在客户端代码中，也就是浏览器里，打开开发者工具的任何人都能看到你的 OpenRouter 密钥。使用一个限制性的学习密钥，设置低消费限额，在部署任何版本之前把供应商调用移到后端。这些年来我撤销过太多泄露的密钥了，这对我来说已经不是建议，而是规则。

打开并安装项目

在包含 package.json 的提取文件夹中打开终端，然后安装锁定的依赖包：

$ cd path-to-your-downloaded-project
$ npm ci

保留包含的锁文件。如果 npm 报告审计发现，不要在不检查它改了什么的情况下运行 npm audit fix --force；这个命令会把课程依赖跨越主版本号升级。

Juno打开并安装项目 在提取的文件夹（包含 package.json 的那个）中运行 npm ci。不要改动锁文件：它列出了课程录制时使用的确切依赖包版本。

Juno打开并安装项目 用 npm ci 是因为下载的项目自带锁文件，ci 会安装它记录的确切版本。审计警告不是强制升级课程项目主版本的理由；你会把一个警告换成一个真的坏掉的项目。

Juno打开并安装项目 修改环境读取时要保留下载的锁文件。一次改一个变量：如果你在同一步升级依赖，你就没法判断是 Vite 编辑生效了还是升级破坏了什么。我这么说是因为我同时做过这两件事。

修复环境变量

在 main.js 和 utils.js 中搜索这些值：

process.env.OPENROUTER_KEY
process.env.MODEL_ID

把所有出现的地方替换为：

import.meta.env.VITE_OPENROUTER_KEY
import.meta.env.VITE_MODEL_ID

在 package.json 旁创建 .env：

VITE_OPENROUTER_KEY=your-openrouter-key
VITE_MODEL_ID=a-current-model-id-from-openrouter

Vite 在启动时读取 .env；编辑后重启开发服务器。

使用一个当前在你的 OpenRouter 账户上可用的、并且支持课程中调用的模型。供应商的目录会变化。

创建 .gitignore：

.env
node_modules/
dist/

Git 手册在忽略文件和好习惯中讲解了这个习惯。

OpenRouter 密钥在浏览器中可见

每一个 VITE_ 值都包含在客户端代码中。使用临时学习密钥，设置低消费限额，不要发布这个项目。部署版本必须从后端调用供应商。

Juno修复环境变量 把两个 process.env 读取替换为匹配的 VITE_ 名字，创建 .env，编辑后重启开发服务器。还有，在这里用临时 OpenRouter 密钥：这个浏览器项目会向任何看代码的人展示这个密钥，我第一次遇到时也被吓到了。

Juno修复环境变量 本地开发在两个源文件中都需要直接的 import.meta.env.VITE_... 读取。VITE_ 前缀就是让一个值到达客户端代码的方式，这就是为什么凭证最后暴露而不是受保护：对你的代码可用意味着对浏览器也可用。

Juno修复环境变量 Vite 在构建和转换时静态替换 import.meta.env.VITE_... 值，只有 VITE_ 前缀的名字才能到达客户端代码。这让修复可以验证：打开浏览器实际加载的源代码，或在网络标签页中查看请求的 Authorization 头，你会看到密钥以纯文本形式显示。这个可读的密钥也是把这个调用移到服务器的理由。

运行并检查项目

$ npm start

打开 Vite 打印的 Local URL 并继续对话，直到项目总结早期的消息。运行中的应用出现新的总结就是成功的标志。Vite 通常在 .env 改变时会自动重启；如果新值没有生效，用 Ctrl+C 停止服务器后重新启动。

Juno运行并检查项目 运行 npm start，打开 Vite 打印的 Local URL，聊天直到应用总结早期的消息。这个总结出现就证明了 OpenRouter 设置工作正常。完成后用 Ctrl+C 停止服务器。

Juno运行并检查项目 页面可以在任何供应商请求成功之前打开，所以页面打开不能证明 OpenRouter 的任何事情。运行总结流程作为真正的检查，如果改变的环境值没有显示，自己重启 Vite。

Juno运行并检查项目 Vite 干净地启动只证明编辑的源代码能编译。成功的总结是单独的检查，确认 OpenRouter 接受你的密钥和模型并返回项目能用的响应。两个不同的失败面；把它们作为两个分别测试。

故障排查

process is not defined： 至少有一个环境读取还留在 main.js 或 utils.js 中。搜索两个文件，不仅仅是 Vite 配置。

模型返回 404 或访问错误： 读取 OpenRouter 错误响应体：401 指向密钥，404 指向模型 ID，429 指向速率限制。从 OpenRouter 复制一个当前的模型 ID，确认账户能使用它。

对话一开始工作，变长后就出问题： 这就是这个课程探索的行为。确认你的编辑没有改变令牌阈值、总结提示或课程附带的示例对话数据，再诊断供应商。

密钥仍然未定义： 确认 VITE_ 的拼写，.env 放在 package.json 旁，并重启 Vite。

Juno故障排查 在两个 JavaScript 文件中搜索遗留的 process.env 读取，然后检查 .env 中两个 VITE_ 的拼写。这里大多数错误是一个漂亮的字符，我知道这一点是因为我第四次读才发现我的错误。还有，长对话触发总结是课程工作正常，不是破坏了。

Juno故障排查 区分缺失的 Vite 替换和供应商或模型错误。如果只有长对话失败，确认课程的上下文阈值和提示，再改动本地设置。

Juno故障排查 改动任何东西之前先读取 OpenRouter 错误响应体：401 是你的密钥，404 是模型 ID，429 是速率限制，每个都有不同的修复。只有这些都成功后，才应该查看应用的总结阈值和提示，即使这样也不要改动课程供应的示例对话数据。