什么是Vite？面向应用搭建者的通俗指南

Vite（读作“veet”，法语中意为“快”）是用于网站和Web应用的构建工具。你在构建时，它会运行一个开发服务器，让你的修改几乎即时显示在浏览器中。准备上线时，它会把代码打包成小巧优化的文件，任何网站主机都能提供服务。它是免费的开源软件，也是许多React、Vue和Svelte项目背后默认使用的工具。

用AI搭建时，Vite为什么重要

你可能从未输入过Vite命令，但如果你的应用是用AI应用搭建工具构建的，那么运行它的很可能就是Vite。除非你另有要求，Mythex的新项目默认使用Vite + React + TypeScript + Tailwind（技术选型方式）。

了解Vite的作用，可以帮助你：

• 理解预览。 当AI编辑文件时，实时更新的预览通常就是一个Vite开发服务器。
• 理解部署。 Vite应用会变成一个静态文件夹，包括HTML、JavaScript、CSS和图片，这种形式成本低，也很容易托管。
• 读懂错误信息。 当预览显示红色错误覆盖层或空白页面时，通常是Vite在报告某个文件编译失败。
• 了解它的局限。 Vite负责构建前端。如果你的应用需要后端，例如数据库、保密的API密钥或支付功能，这些需要运行在别处。参见前端与后端。

一个日常类比

可以把它想象成餐厅的厨房。

• 营业前备料（开发阶段）：厨师边做边尝、边调整每道菜。调整调味，马上再尝一口。这就是Vite的开发服务器：你修改文件，页面立刻更新，通常还不会丢失你在表单中输入的内容。
• 外卖订单（生产阶段）：所有食物都经过烹饪、分装、打包和贴标签，以便运输并能在任何地方提供。这就是vite build：你的代码被打包、压缩，并加上指纹，形成可以放到任何主机上的文件。

同样的菜谱，两种截然不同的处理方式，而Vite两种都能完成。

Vite的实际工作内容

现代Web应用由许多文件组成：组件、样式、图片和第三方库。浏览器无法直接按原样使用这些内容。TypeScript需要转换为JavaScript，React的JSX需要转换，而Tailwind的类需要转换为CSS。

Vite通过两种模式处理这些工作：

较早的工具会在显示任何内容之前先把整个应用打包，因此启动和更新大型项目可能需要很长时间。Vite的诀窍在于开发时跳过这一步，让浏览器按需加载文件。而在生产环境中，它仍然会打包，从Vite 8起使用名为Rolldown的打包器，因为对访客而言，少量优化后的文件比大量小文件更快。

实例：Vite项目里有什么

下面大致是一个小型Vite + React应用的结构：

my-app/
  index.html          ← 应用起始的唯一HTML页面
  package.json        ← 库和脚本（dev、build）列表
  vite.config.ts      ← Vite设置和插件
  src/
    main.tsx          ← 启动React并将其挂载到index.html中
    App.tsx           ← 应用的顶层组件
    index.css         ← 样式，例如 @import "tailwindcss";
  public/             ← 原样复制的文件（favicon、robots.txt）

package.json中的脚本如下：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

现在跟踪一次修改：

1. 你要求AI“把标题改成蓝色”。
2. 它在App.tsx中修改了一个类。
3. Vite发现文件已更改，只转换该文件，并把更新推送到浏览器。
4. 预览中的标题变为蓝色，通常在一秒之内完成。

发布时，vite build会生成类似dist/index.html和dist/assets/index-a1b2c3.js的文件。文件名中看似随机的部分会在内容变化时改变，因此浏览器和CDN可以长时间缓存文件，而不会提供过时的代码。

Vite中的环境变量

Vite只会向浏览器代码暴露名称以VITE_开头的变量，例如VITE_PUBLIC_MAP_ID。这是一项安全措施：浏览器代码中的任何内容都可能被访客看到，因此密钥绝不能使用这个前缀，并且必须保存在后端。参见环境变量与密钥。

关键术语

常见误解

• “Vite是一个框架。” 它是构建工具。React、Vue或Svelte才是框架；Vite负责运行和打包它们。
• “Vite应用包含后端。” 标准的Vite应用只包含前端。数据库、登录和保密密钥需要在旁边配备服务器或API。
• “开发服务器可以直接上线。” 它并非为真实流量设计。请始终部署生产构建的输出。
• “.env中的内容都是保密的。” 在Vite应用中，VITE_变量会被直接写入每个访客下载的文件中。
• “访问某个页面网址出现404，说明应用坏了。” 在单页应用中，主机必须把每个路由都返回到index.html。这是托管设置问题，参见如何修复部署后的404错误。

向你的AI搭建工具提出什么要求

• “这个应用只是Vite前端，还是也有后端？每一部分分别运行在哪里？”
• “运行生产构建，并在发布前修复所有错误和警告。”
• “检查确保没有任何保密密钥位于VITE_变量中，或前端代码的任何位置。”
• “预览显示空白页面，请检查Vite和浏览器控制台的错误并修复根本原因。”参见如何修复空白白屏页面。
• “确保发布后，刷新任意页面网址都能正常工作，而不仅仅是首页。”

Mythex中的Vite

除非你要求使用Next.js、静态HTML或其他后端，每个新的Mythex项目都以Vite启动。你私有沙盒中的实时预览会随着智能体编辑文件而更新，点击发布即可构建并部署应用，无需你自己设置托管。如果以后需要API或数据库，可以在聊天中提出要求，Mythex可以在Vite前端旁边添加后端服务（多服务应用）。

常见问题