在本地运行 Intro to Mistral AI

使用此页面在你的计算机上运行提取的 Intro to Mistral AI 项目。该项目按照 Scrimba 提供的方式读取 API 密钥，所以在 Vite 中运行前需要改动一行，然后函数调用的结果会出现在浏览器控制台中。密钥处理方式与在本地运行 Chef Claude相同，只是针对不同的服务商。

开始前准备

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

检查 Node 和 npm 是否可用：

bash

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

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

Juno开始前准备安装 LTS 版本的 Node.js（它包含 npm），并创建一个 Mistral API 密钥。

Studio 显示密钥时立即复制它，并将它保存在安全的地方，直到你添加到 .env 文件中。

打开项目文件夹

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

bash

$ cd path-to-your-downloaded-project

Juno打开项目文件夹在包含 package.json 的提取文件夹中工作，并从该文件夹运行每个 npm 命令。你稍后创建的 .env 文件也应该放在这个文件夹中。

使 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：

dotenv

VITE_MISTRAL_API_KEY=your-mistral-api-key-here

在它旁边创建 .gitignore 并添加：

txt

.env
node_modules/

VITE_ 前缀是必需的，因为 Vite 仅向浏览器代码暴露特殊前缀的环境变量。忽略 .env 很重要，因为意外添加到 Git 中的密钥不会因删除文件而被移除：该值会保留在仓库历史中。Git 手册在忽略文件和良好习惯中涵盖了更广泛的做法。

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

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

Juno使 API 密钥在 Vite 中工作改变旧的密钥查找方式，在 .env 中放置一个临时密钥，并将该文件保持在 Git 之外。

浏览器仍然可以读取这个密钥，所以使用一个你愿意之后删除的密钥。这种暴露是前端专用项目的限制，不是你设置中的错误。

安装并运行项目

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

bash

$ npm install
$ npm start

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

修改 .env 后重新启动 Vite。用 Ctrl+C 停止它。

Juno安装并运行项目运行 npm install，然后 npm start，并打开它打印的 Local URL。然后打开浏览器控制台，因为函数调用课程会在那里打印它的答案。

一个空白页面是预期的结果，不是失败。

故障排除

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

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

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

页面上什么都不显示： 打开浏览器控制台。函数调用课程在那里记录其最终响应，而不是在页面上渲染它。

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

Juno故障排除检查 VITE_ 名称、.env 的位置、模型 ID 和浏览器控制台，然后重新启动。一次改变一个东西。

不管它在你的机器上运行得多好，都不要发布这个版本。

在本地运行 Intro to Mistral AI ​

开始前准备 ​

打开项目文件夹 ​

使 API 密钥在 Vite 中工作 ​

安装并运行项目 ​

故障排除 ​

在本地运行 Intro to Mistral AI

开始前准备

打开项目文件夹

使 API 密钥在 Vite 中工作

安装并运行项目

故障排除