Vite 简介与安装
🎯 引言
学会这篇文章，你能明白 Vite 是什么、它解决了什么问题，以及为什么现在新建 Vue3 项目时经常选它。你还会用一行命令搭好一个 Vite 项目，并成功运行开发服务器和打包命令。
🧱 什么是 Vite
Vite 是下一代前端构建工具，由 Vue 作者尤雨溪主导开发。它的名字发音 /vit/，法语里意思是“快”。
传统打包工具（如 Webpack）在开发时会把所有文件先打包成一个或多个 bundle，项目越大，启动越慢。Vite 的做法不一样：
- 开发时直接利用浏览器原生 ES Module，按需提供文件。
- 修改代码后只更新变化的模块，实现极快的热更新。
- 打包时再用 Rollup 进行高度优化。
⚡ 为什么选择 Vite
| 对比项 | 传统打包工具 | Vite |
|---|---|---|
| 开发启动 | 先打包再启动，项目越大越慢 | 直接启动，毫秒级 |
| 热更新 | 重新编译整包或大量模块 | 只更新修改的模块 |
| 配置复杂度 | 配置项多，学习曲线陡 | 开箱即用，配置简洁 |
| 生产打包 | 自带或依赖插件 | 基于 Rollup，输出高效 |
🚀 安装并创建第一个 Vite 项目
Vite 官方提供了脚手架，推荐用 create-vite 一键创建：
npm create vite@latest
执行后会引导你选择：
- 项目名称，例如
my-vite-app。 - 框架，例如
Vue、Vanilla。 - 语言变体，例如
JavaScript或TypeScript。
也可以把参数一次性写完：
npm create vite@latest my-vite-app -- --template vue
-- --template vue 中的 -- 是把后面的参数传给 create-vite。vue 可以换成 vue-ts 等。进入项目并安装依赖：
cd my-vite-app
npm install
🛠 常用命令
安装完成后，package.json 里已经准备好了几个脚本：
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
启动开发服务器：
npm run dev
默认会打开 http://localhost:5173/，你会看到一个默认页面。
生产打包：
npm run build
命令执行后会在项目根目录生成 dist 文件夹，里面就是可以部署到服务器的静态资源。
本地预览生产包：
npm run preview
preview 会先启动一个本地服务器预览 dist 里的内容，方便你在部署前检查最终效果。🧾 小节总结
- Vite 是新一代前端构建工具，开发时利用浏览器原生 ES Module，打包时基于 Rollup。
- 相比传统打包工具，Vite 启动快、热更新快、配置更简洁。
- 使用
npm create vite@latest创建项目，安装依赖后npm run dev即可启动。 vite build生成dist目录，vite preview本地预览生产产物。
❓ 知识问答
Q1：Vite 只能用于 Vue 项目吗？
不是。Vite 官方支持 Vue、Preact、Lit、Svelte、Solid 以及原生 JavaScript。
Q2：Vite 和 Webpack 最大的区别是什么？
开发阶段 Vite 不先打包，而是直接让浏览器按请求加载 ES Module；Webpack 是先完整打包后再启动服务。
Q3：为什么 Vite 启动这么快？
因为它跳过了开发阶段的打包过程，利用浏览器原生模块化能力，需要哪个模块就处理哪个模块。
Q4：生产环境也用 ES Module 吗？
生产构建时 Vite 会用 Rollup 把代码打包、压缩、分块，输出浏览器兼容性更好的静态文件。
🧪 小练习
按照以下步骤创建一个 Vite + Vue 项目：
- 使用
npm create vite@latest创建项目，选择 Vue 和 JavaScript。 - 安装依赖并运行
npm run dev。 - 打开
src/App.vue，把标题改成你自己的名字。 - 运行
npm run build，查看生成的dist目录。
<template>
<h1>请在这里修改标题</h1>
</template>
🎉 恭喜你完成了 Vite 的入门！下一篇我们会学习 vite.config.js 的常用配置，让你的项目更顺手。