Learn Context Engineering在本地运行 Context Engineering
使用本页面运行你从 Context Engineering 模块中提取的总结任务。项目下载后即可安装，但有两个文件读取 OpenRouter 设置的方式只在 Scrimba 上有效，你需要为 Vite 修改这些读取方式，并在应用能够回答问题之前添加你的密钥。
你需要的准备
安装 Node.js 24（推荐的 LTS 版本），它包含 npm。Node 22.12 或更新的版本也可以。项目运行在 Vite 7 上，不支持更旧的 Node 版本。
检查这两个命令是否都输出版本号：
$ node --version
v24.18.0
$ npm --version
11.18.0如果任一命令显示"command not found"，请先完成 Node 的安装再继续。如果 node --version 输出的版本低于 v22.12.0，先安装 Node 24，因为项目的 Vite 版本不支持它。
你还需要一个 OpenRouter API 密钥和你的账户可以使用的模型 ID。创建一个设置了低消费限额的临时密钥：这个学习项目从浏览器发送供应商请求，所以密钥会随每个请求传输。
node --version 和 npm --version 是否都输出数字。从 v22.12.0 及以上版本都可以。 然后创建一个设置了低消费限额的临时 OpenRouter 密钥，并记下你的账户可以使用的模型 ID。
打开并安装项目
在提取的文件夹（包含 package.json 的文件夹）中打开终端，然后完全按照锁文件的记录安装包：
$ cd path-to-your-downloaded-project
$ npm ci完成后，package.json 旁会出现一个 node_modules 文件夹。保持 package-lock.json 不变。如果 npm 报告审计发现，在检查改动之前不要运行 npm audit fix --force；该命令可能会将课程依赖跨越主版本号移动。
package.json 的文件夹）中运行 npm ci。node_modules 文件夹应该会出现。 不要修改锁文件：它列出了这门课程录制时使用的确切包版本。
修复环境变量
在 Scrimba 上，项目通过 process.env 读取其密钥和模型。在 Vite 开发服务器下运行的浏览器项目中，process 不存在，所以这些读取需要改变。
在 main.js 和 utils.js 中搜索这些值：
process.env.OPENROUTER_KEY
process.env.MODEL_ID将每个出现的位置替换为：
import.meta.env.VITE_OPENROUTER_KEY
import.meta.env.VITE_MODEL_ID如果漏掉一个，应用稍后会在浏览器中失败，显示 process is not defined，所以要在两个文件中搜索，直到都不包含 process.env。
在 package.json 旁创建 .env：
VITE_OPENROUTER_KEY=your-openrouter-key
VITE_MODEL_ID=a-current-model-id-from-openrouter使用当前在你的 OpenRouter 账户中可用且支持课程中所做调用的模型；供应商目录会变化。Vite 启动时会读取 .env，所以编辑该文件后要重启开发服务器。
在 .env 旁创建 .gitignore 以确保密钥永远不会进入 Git：
.env
node_modules/
dist/Git 手册在 忽略文件和好习惯 中介绍了这个习惯。
OpenRouter 密钥在浏览器中可见
每个 VITE_ 值都会被包含在客户端代码中。这里使用临时学习密钥，设置低消费限额，不要发布此项目。部署版本必须从后端调用供应商。
main.js 和 utils.js 中，将两个 process.env 读取替换为相应的 import.meta.env.VITE_ 名称。然后使用你的密钥和模型 ID 创建 .env，并添加 .gitignore。 这里使用临时 OpenRouter 密钥：浏览器项目会向任何查看的人显示该密钥。
运行并检查项目
启动开发服务器：
$ npm start打开 Vite 输出的 Local URL，然后继续对话，直到项目总结其之前的消息。在运行的应用中出现新摘要是密钥和模型有效的可见证明。页面可以在任何 OpenRouter 请求成功之前打开，所以打开页面本身并不能证明设置正确。
用 Ctrl+C 停止服务器。在修改 .env 后，用 npm start 重新启动它，以便 Vite 读取新的值。
npm start，打开 Vite 输出的 Local URL，然后聊天直到应用总结其之前的消息。这个总结就是你的 OpenRouter 设置有效的证明。 完成后用 Ctrl+C 停止服务器。
故障排除
process is not defined： 至少有一个环境读取仍然在 main.js 或 utils.js 中。搜索两个文件，不仅仅是 Vite 配置。
密钥仍然是 undefined： 确认 .env 和代码中 VITE_ 的拼写，把 .env 放在 package.json 旁，并重启 Vite。
模型返回 404 或访问错误： 在浏览器开发者工具中阅读 OpenRouter 错误：401 指向密钥，404 指向模型 ID，429 指向速率限制。从 OpenRouter 复制当前的模型 ID，并确认你的账户可以使用它。
对话进行到很长时才出现问题： 这是该课程探索的行为。在查看供应商之前，确认你的编辑没有改变令牌阈值、总结提示或课程随附的示例对话数据。
process.env 读取，然后检查 .env 中两个 VITE_ 的拼写并重启。 长对话触发总结是课程正常工作，不是破损。