Vite
中级通用
Vite 是前端开发与构建工具，提供本地开发服务器，并把代码处理成可部署的网页资源。它解决开发时反复等待构建、手动处理模块和资源的问题，让你修改后台页面后能及时看到效果，上线前再生成发布文件。
你可能会说：「帮我搭一个前端项目，改完页面就能看到效果，做好后还能打包上线。」
动手看看订单后台的开发与发布
1
开发订单后台时，先启动 Vite。它读取项目配置，开启本地开发服务器，此时还不用生成整站发布文件。
要点Vite 怎样帮你把页面从开发做到上线？
- 1
开发时按需处理模块
你打开本地页面时，Vite 利用浏览器的模块能力，按需处理并提供源码，而不是先把整个应用打成一个包。这样做能减少启动和修改时的等待。
- 2
修改后更新相关页面
你调整订单表格的样式时，Vite 通常通过热更新替换相关模块，不必每次刷新整页。能否保留组件状态还取决于框架插件和修改内容，部分变化仍会触发刷新。
- 3
上线前生成发布文件
开发服务器方便你调试，正式上线则使用构建生成的资源文件。Vite 会处理代码和资源，但使用 TypeScript 时，类型检查通常还要由单独命令或工具完成。
容易混淆的地方
Vite 和 React、Vue 分工不同：框架负责组织界面与交互，Vite 负责开发环境和构建流程，所以它们常一起使用。它与 Webpack 的职责有重叠，但开发机制和配置方式不同；选了 Vite，也不代表已经有后端、数据库或线上托管。
什么时候用
适合用
- 做 React 或 Vue 管理后台，需要本地开发、热更新和上线构建。
- 做浏览器里的 AI 聊天工具，用它组织前端代码，并连接独立的后端接口。
- 做包含多个脚本模块和样式文件的交互网站，希望统一处理资源与构建。
不适合用
- 只写一个无需依赖的简单静态页面，直接用 HTML、CSS 和浏览器即可。
- 只做接收请求的后端 API，没有网页界面，选择后端框架和对应运行环境。
- 只想给现有 Next.js 项目新增页面，沿用框架的开发与构建流程即可。
练一练选一个答案，看看解释
你让 AI 用 Vite 搭好一个客服聊天前端，本地已经能打开。现在要让客户在线使用，下一步哪种安排更合理？
让 AI 帮你做复制给 AI Agent 直接用
请用 Vite 和 React 搭建客服聊天前端，支持本地热更新和生产构建。聊天请求连接独立后端，密钥不放进前端代码。请列出启动、类型检查和构建命令，并说明构建产物如何部署。