Vite
极速的现代前端构建工具与开发服务器。
关于 Vite
Vite 基于原生 ESM 实现毫秒级冷启动和热更新，并提供优化的生产构建，已成为 Vue、React 等框架的主流脚手架。
Vite 的核心功能
- 基于原生 ESM 的开发服务器实现毫秒级冷启动，前端项目即开即用。
- 内置模块热更新（HMR），修改代码后页面即时刷新，提升前端开发效率。
- 生产环境使用 Rollup 打包，自动完成代码分割与静态资源优化。
- 提供丰富的插件生态，对 Vue、React、Svelte 等主流框架有一等支持。
Vite 适合哪些场景
- 前端开发者在搭建 Vue 或 React 新项目时，用 Vite 脚手架快速初始化并开始编码。
- 独立开发者在部署个人博客或产品官网前，用 Vite 构建优化后的静态资源。
- 团队在维护大型前端工程时，借助 Vite 的热更新缩短日常调试的等待时间。
- 学习前端的新手跟着教程练习时，用 Vite 免去复杂配置直接跑起开发环境。
Vite 的特点
- 基于原生 ESM 按需编译，冷启动和热更新速度在同类构建工具中表现突出。
- 配置简洁，官方模板开箱即用，对 Vue、React、Svelte 等框架有一等支持。
- 插件接口兼容 Rollup 生态，可直接复用大量现有插件。
- 开源免费（MIT 协议），社区活跃，迭代速度快。
Vite 使用指南
Vite 怎么创建一个新项目
在有 Node.js 环境的终端运行 npm create vite@latest，按提示输入项目名并选择框架模板（如 Vue、React），进入目录后执行 npm install 和 npm run dev 即可启动开发服务器。第一次使用建议直接选官方模板，跑通后再按需修改配置。
Vite 项目打包部署的基本流程
执行 npm run build 会在 dist 目录生成优化后的静态文件，把这个目录交给任意静态托管服务（如 Nginx、Vercel、Netlify）即可上线。如果网站部署在子路径下，需要在配置文件中设置 base 选项，否则静态资源路径会 404。
开发环境请求后端接口跨域怎么办
常见做法是在 Vite 配置的 server.proxy 中设置代理，把 /api 等前缀的请求转发到后端地址，浏览器看到的仍是同源请求。注意代理只在开发服务器生效，生产环境的跨域仍需后端或网关配置 CORS。
Vite 常见问题
Vite 是免费的吗
Vite 是完全免费的开源项目，采用 MIT 协议，个人和商业项目都可以自由使用。它的插件生态也大多开源，日常开发不需要任何费用。
Vite 和 Webpack 有什么区别
Vite 在开发阶段利用浏览器原生 ESM 按需加载模块，冷启动和热更新通常比 Webpack 快很多；生产构建则交给 Rollup。Webpack 生态更成熟、配置更灵活，两者都还在广泛使用，可按项目情况选择。
Vite 支持 React 吗
支持。创建项目时选择 React 模板即可，官方维护的插件提供完整的 JSX 转换和快速刷新能力。除 React 外，Vue、Svelte、Solid 等框架也有官方或社区模板。
第三方网站的功能、价格和可用性可能发生变化。请在访问时查看其最新条款，并谨慎处理个人或敏感信息。
