在本地运行 Intro to Mistral AI

使用本页面在你的计算机上运行提取的 Intro to Mistral AI 项目，并用你自己的密钥从 Mistral 获得答案。相比 Scrimba 编辑器有两处不同：index.js 中的一行必须按照 Vite 的方式读取密钥，答案会出现在浏览器控制台而不是页面上。项目在页面加载后立即向 Mistral 提问，所以没有按钮需要点击。

你需要先准备什么

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

检查两个命令都能工作。你的版本号可能不同：

bash

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

你还需要一个 Mistral API 密钥，因为项目向 Mistral 请求答案。通过遵循 Mistral 的 API 密钥步骤在 Mistral 的控制台中创建一个。给它设置一个几天后过期的截止日期，并立即复制：Mistral 仅显示一次完整密钥。这个项目从浏览器调用 Mistral，所以密钥最终会在页面中。

Juno你需要先准备什么安装 LTS 版本的 Node.js（包含 npm），检查 node --version 和 npm --version 都能打印出版本号。

然后创建一个 Mistral API 密钥，设置较短的过期时间，关闭对话框前把它复制到安全地方。之后你就看不到了。

安装包

在提取的项目文件夹中打开终端。这个文件夹应该包含 package.json、index.js 和 tools.js：

bash

$ cd path-to-your-extracted-project
$ npm install

npm 完成后会报告添加了多少包：

text

added 20 packages, and audited 21 packages in 9s

Juno安装包在包含 package.json 的文件夹中打开终端并运行 npm install。它应该最后显示添加了多少包。

如果 npm 说找不到 package.json，说明你在错误的文件夹中。

在 index.js 中改一行

Scrimba 编辑器为你填充 process.env.MISTRAL_API_KEY。浏览器中没有 process，Vite 也不创建它，所以密钥的读取方式必须改变。

打开 index.js 并将第三行从：

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

改为：

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

Vite 只会将名称以 VITE_ 开头的变量交给浏览器代码，这就是为什么名称要加上这个前缀。文件的其余部分保持课程中编写的样子。

Juno在 index.js 中改一行在 index.js 中，把 process.env.MISTRAL_API_KEY 替换为 import.meta.env.VITE_MISTRAL_API_KEY 并保存文件。

这一行是这个项目唯一需要的代码改动。

将你的密钥添加到 .env

在 package.json 旁边创建 .env 并把你的密钥放在里面：

dotenv

VITE_MISTRAL_API_KEY=your-mistral-api-key-here

在 package.json 旁边创建 .gitignore 并添加：

txt

.env
node_modules/

到达 Git 仓库的密钥即使在你删除文件后仍会保留在历史记录中。Git 手册在忽略文件和良好习惯中讨论了这个习惯。

这个密钥在浏览器中可见

Vite 会把所有 VITE_ 值写入发送给浏览器的代码中，所以任何打开这个页面的人都能读到你的密钥。把这个版本保留在你自己的计算机上：永远不要部署或共享它，也不要提交 .env。发布的版本需要一个后端或无服务器函数来将密钥保留在服务器上。

Juno将你的密钥添加到 .env 在 package.json 旁边创建一个名为 .env 的文件，一行放你的密钥，然后在 .gitignore 中列出 .env 这样 Git 就永远不会保存它。

启动应用并读取答案

启动开发服务器：

bash

$ npm start

Vite 可能首先打印一个以 (!) Your Vite config uses features 开头的警告。它不会停止应用。在它下面，Vite 会打印要打开的地址：

text

  VITE v8.3.4  ready in 740 ms

  ➜  Local:   http://localhost:5173/

打开确切的 Local 地址。页面只显示 Mistral 的标志，这就是它永远显示的所有内容。答案会进入控制台，所以打开浏览器的开发者工具（F12，或 Mac 上 Chrome 中的 Cmd+Option+J）并选择 Console 标签。

几秒钟内控制台会打印 Mistral 对"交易 T1001 何时被支付？"的答案：一句给出支付日期的句子（2021 年 10 月 5 日，存储在 tools.js 中为 2021-10-05）。措辞是模型自己的。这句话意味着你的密钥、模型和函数调用都正常工作了。

如果没有答案出现，原因会在控制台中用红色显示。Vite 还会把错误复制到运行它的终端中，在包含 [vite] (client) 的一行中。下面的故障排除部分对应每条消息。

每次页面加载时（包括 Vite 在你保存文件后重新加载），它都会再次询问 Mistral。用 Ctrl+C 停止项目。

Juno启动应用并读取答案运行 npm start，如果出现配置警告则忽略，并打开 Local 地址。只看到标志是正常的。

在浏览器的开发者工具中打开 Console 并等待几秒钟以获得关于交易 T1001 的答案。

故障排除

控制台显示 process is not defined： 要么 index.js 仍在读取 process.env，要么 Vite 没有找到密钥。首先检查 index.js 的第三行。如果它已经读取 import.meta.env.VITE_MISTRAL_API_KEY，检查 .env 是否在 package.json 旁边，名称是否确切地是 VITE_MISTRAL_API_KEY，然后保存 .env：Vite 会重启，页面再次询问 Mistral。

控制台显示 HTTP error! status: 401 和 Invalid API Key： 密钥到达了 Mistral，但 Mistral 不接受它。检查 .env 中是否包含完整的密钥，周围没有空格。如果密钥已过期或在 Mistral 的控制台中被删除，创建一个新的。保存 .env：Vite 会重启，页面再次询问 Mistral。

控制台显示另一个 HTTP error! status:： 阅读它之后的 Response: 文本。这是 Mistral 自己的解释，它说明了要修复什么。如果它提到模型，将 index.js 中的 mistral-large-latest 与 Mistral 的模型页面进行比较，仅改变模型名称。将 SDK 保持在 0.1.3。

控制台说 Max retries reached，大约半分钟后： Mistral 不断回答速率限制或服务器错误。等一分钟，然后重新加载页面一次。

Juno故障排除在 Console 中找到提到 process、HTTP error 或 Max retries 的行，并将其与上面的加粗标题匹配。

在本地运行 Intro to Mistral AI ​

你需要先准备什么 ​

安装包 ​

在 index.js 中改一行 ​

将你的密钥添加到 .env ​

启动应用并读取答案 ​

故障排除 ​

在本地运行 Intro to Mistral AI

你需要先准备什么

安装包

在 index.js 中改一行

将你的密钥添加到 .env

启动应用并读取答案

故障排除