本地运行 Intro to Mistral AI

使用本页在你的计算机上运行提取的 Intro to Mistral AI 项目。你需要把 Scrimba 专用的 API 密钥查询改为支持 Vite 的方式，启动项目，然后在浏览器控制台中查看函数调用的结果。这里的密钥处理方式与 本地运行 Chef Claude 中的模式一致，两个页面只是为不同的服务商解决同一个问题。

前置准备

安装支持的 LTS 版本 Node.js。推荐使用 Node 24，它已经包含 npm。

检查 Node 和 npm 是否可用：

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

你还需要一个 Mistral API 密钥。如果你还没有密钥，请按照 Mistral 的 Studio 密钥设置 创建一个，并在它显示时复制下来。稍后你会把它添加到本地环境文件中。

Juno前置准备 安装 LTS 版本的 Node.js（它自带 npm），然后创建一个 Mistral API 密钥。Studio 显示密钥时立即复制它，因为那是唯一能看到完整值的时刻。我自己就有过关闭对话框太快，不得不重新创建一个密钥的经历！

Juno前置准备 Studio 只会显示一次新密钥，之后只保存它的名称，所以在离开页面前要把它粘贴到安全的地方。检查你的账户是否能访问你下载的课程中使用的模型，因为密钥创建和模型访问是分开的。免费层密钥足以满足这个项目的请求量。

Juno前置准备 项目用 Vite 运行，用 npm 安装，所以这一步可以用占位符密钥启动，看起来完全正常。只有函数调用循环才能真正验证密钥和模型，这就是为什么启动没有错误的开发服务器对你的 Mistral 账户一无所知。在开始调试那些没有问题的代码之前，先确认凭证真的有效。

打开项目文件夹

在包含 package.json 的提取的文件夹中打开终端：

$ cd path-to-your-downloaded-project

Juno打开项目文件夹 在包含 package.json 的提取文件夹中工作，所有 npm 命令都从这里运行。你稍后创建的环境文件也要放在这个文件夹里。这个阶段设置失败最常见的原因就是从错误的文件夹运行命令，一个命令就能确认你在哪个文件夹里。

Juno打开项目文件夹 这是一个 npm 和 Vite 项目，package.json 告诉你 npm start 实际运行的是什么。下一步你要改变它的 Scrimba 专用密钥查询，让提取的应用改为读取本地环境文件。

Juno打开项目文件夹 看提取项目中的脚本，而不是假设通常的 npm 命令。这个下载不包含 lockfile，所以 npm install 每次都会根据注册表解析版本并将结果写入本地。两个人在不同的日期设置可能会得到不同的补丁版本，在责怪你的计算机之前值得记住这一点。

让 API 密钥在 Vite 中工作

下载的 index.js 使用 Scrimba 的环境语法读取密钥：

const client = new MistralClient(process.env.MISTRAL_API_KEY)

一个标准的 Vite 浏览器项目不提供这个 process.env 值。把这一行改为：

const client = new MistralClient(import.meta.env.VITE_MISTRAL_API_KEY)

在 package.json 旁边创建 .env：

VITE_MISTRAL_API_KEY=your-mistral-api-key-here

在旁边创建 .gitignore 并添加：

.env
node_modules/

VITE_ 前缀是必需的，因为 Vite 只向浏览器代码公开带有特殊前缀的环境变量。意外提交包含密钥的文件无法通过删除文件来撤销，因为该值会留在仓库历史记录中，Git 手册的 忽略文件和良好习惯 部分介绍了这一更广泛的做法。

这个密钥在浏览器中是可见的

VITE_ 前缀故意将 API 密钥放入前端包中。仅在本地学习时使用临时的、受限的密钥。永远不要部署或分享这个版本，也永远不要提交 .env。生产应用需要后端或无服务器函数来在服务器上保管密钥。

Juno让 API 密钥在 Vite 中工作 改变旧的密钥查询方式，把一个临时密钥放在 .env 中，并把这个文件从 Git 中排除。浏览器仍然可以读取这个密钥，所以要用一个你愿意在之后删除的密钥。这种暴露是前端专用项目的局限性，不是你设置中的错误。

Juno让 API 密钥在 Vite 中工作 Vite 客户端代码读取 import.meta.env 并仅暴露 VITE_ 前缀的变量，这就是为什么重命名很重要。编辑 .env 后重启服务器，因为这些值在启动时被读取。

Juno让 API 密钥在 Vite 中工作 Vite 会把字面密钥内联到提供的 JavaScript 中，所以你可以打开 DevTools，在 Sources 中搜索，就能以纯文本形式找到你的凭证。看一次就能让这个规则变得具体。这个项目的后端边界必须覆盖整个函数调用循环，而不仅仅是密钥：服务器保管凭证，运行工具调用，并仅返回完成的答案。

安装并运行项目

安装下载的依赖并启动 Vite：

$ npm install
$ npm start

打开 Vite 打印的确切 Local URL，通常是 http://localhost:5173/。在函数调用课程中，打开你的浏览器开发者工具并选择 Console。Mistral 返回的响应出现在那里就是可见的成功结果；课程不会在页面上渲染这个结果。

编辑 .env 后重启 Vite。用 Ctrl+C 停止它。

Juno安装并运行项目 运行 npm install，然后 npm start，打开它打印的 Local URL。然后打开浏览器 Console，因为函数调用课程把答案打印在那里而不是在页面上。看起来空白的页面是预期的结果，不是失败。

Juno安装并运行项目 使用 Vite 打印的确切地址而不是记忆中的端口，在环境变量改变后重启。函数调用课程报告到 Console，所以在测试时保持 DevTools 打开。

Juno安装并运行项目 运行的 Vite 服务器证明了包已安装且编辑的源代码已编译，仅此而已。只有真实请求才能确认 Mistral 接受你的密钥和课程的模型，所以在认为设置完成之前要运行函数调用示例。启动和有效凭证在完全不同的地方失败。

故障排除

process is not defined： Scrimba 风格的环境读取仍在 index.js 中。用上面的 import.meta.env.VITE_MISTRAL_API_KEY 形式替换它并重启 Vite。

密钥是 undefined 或认证失败： 确认确切的 VITE_ 变量名，确保 .env 在 package.json 旁边，并重启项目。检查密钥在你的 Mistral 账户中是否仍然活跃。

模型不可用或 SDK 请求失败： 下载的 ZIP 固定了一个较旧的 Mistral SDK 并要求使用 mistral-large-latest。提供商 SDK 和模型目录会改变。将 index.js 中的模型 ID 与 Mistral 文档 中列出的模型进行比较，在改变固定的 SDK 版本之前改变 ID，因为重命名的模型是更常见的原因。

页面上什么都没有出现： 打开浏览器控制台。代表性的函数调用课程把最后的响应记录在那里，而不是在页面中渲染。

如果你想发布这个项目： 不要发布这个前端专用版本。先把 Mistral 调用和凭证移到后端。

Juno故障排除 检查 VITE_ 名称、.env 的位置、模型 ID 和浏览器 Console，然后重启。逐个排查而不是一次改变几个东西。无论它在你的计算机上运行得多好，都不要发布这个版本。

Juno故障排除 把未解决的 process.env 读取与提供商授权和模型可用性分开，因为每个都会产生不同的错误。编译和完成请求是不同的检查点，到达浏览器的页面仅确认了第一个。

Juno故障排除 按这个顺序检查：先是 Vite 变量，然后是 SDK 启动，然后是模型访问，最后是函数调用循环。重命名的模型和被拒绝的密钥看起来都像请求失败，需要相反的修复，所以在编辑任何东西之前先读取响应体。在部署前，请求移到后端，这会消除整个问题类别以及暴露的密钥。