一、前言
前两篇环境全部就位，今天回答一个新手必问的问题：Vite 到底是什么？凭什么几百万行的大项目也能"秒启动"？顺带把 vite.config.js 里最常用的配置讲透，以后每个项目都这么配。
二、Vite 是什么？为什么这么快？
一句话：Vite 是 Vue 作者尤雨溪开发的下一代构建工具，Vue3 官方推荐。核心优势全在启动方式上。
传统 webpack：先打包，再启动
执行 npm run dev 后，webpack 要先把项目里所有 js、css、vue 文件打成一个 bundle，打包完才能启动服务器。项目越大，等待越久——文件多几十倍，时间也跟着翻倍。
Vite：先启动，按需编译
启动时一个文件都不打包，直接把开发服务器跑起来。浏览器请求哪个文件，Vite 才现场编译哪个文件。
打个比方：webpack 是"把整个菜市场搬回家再开始做菜"，Vite 是"做什么菜，现买什么菜"。
不信可以自己验证：npm run dev 后打开浏览器按 F12 → Network，会看到浏览器在逐个请求 App.vue、HelloWorld.vue 这些文件——注意，它们返回的已经是浏览器认识的 js 代码，这就是 Vite 在背后实时编译。
【截图位置：F12 的 Network 面板里 .vue 文件被编译成 js 的请求列表】
有人问：那上线时也这么"现编译"吗？不是。执行 npm run build 时 Vite 会用 Rollup 完整打包输出 dist 目录。开发要快（不打包），上线要稳（完整打包），两不耽误。
三、热更新（HMR）：改代码页面不刷新
Vite 另一大杀器。以前改一行代码整个页面刷新，表单里填的东西全没了；Vite 下大部分修改只替换对应部分，页面状态原地保留：
- 改 style 样式：直接生效，组件都不重新挂载
- 改 template/script：只重新挂载当前组件，其它组件状态不丢
写个例子感受下（App.vue）：
<template>
<h1>计数器：{{ count }}</h1>
<button @click="count++">点我 +1</button>
</template>
<script setup>
import { ref } from 'vue'
// 先点按钮把数字加到 5，再改下面的颜色保存试试
const count = ref(0)
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>
操作步骤：先点按钮把 count 加到 5，再去改 h1 的颜色保存——数字还是 5，颜色却变了。这就是热更新。
【截图位置：改颜色保存后 count 依然保持 5 的效果图】
四、vite.config.js 常用配置（照抄就能用）
直接上带注释的完整配置，逐行拆解：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'
// defineConfig 本身没功能，但能让编辑器提示配置项，写错会飘红
export default defineConfig({
// 插件列表，让 Vite 认识 .vue 单文件组件
plugins: [vue()],
resolve: {
alias: {
// '@' 指向 src 目录，以后引文件统一写 @/xxx
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
port: 5173, // 固定端口，避免每次启动端口自动 +1
open: true, // 启动后自动打开浏览器
host: true // 手机连同一 WiFi 可通过 IP 访问，真机调试用
// proxy 跨域代理：网络请求篇专门讲
}
})
重点讲 @ 别名，先看没有它有多痛：
// 文件层级一深，../../ 一大串，眼睛看花还容易错
import HelloWorld from '../../components/HelloWorld.vue'
// 配了 @ 之后，永远从 src 出发，清晰稳定
import HelloWorld from '@/components/HelloWorld.vue'
注意：改完 vite.config.js 必须重启（终端 Ctrl + C，再 npm run dev），配置文件不会热更新。
五、jsconfig.json：让编辑器认识 @
配完上一步，项目能跑，但编辑器会飘红"找不到模块"，Ctrl + 点击 @/xxx 也无法跳转。原因：Vite 认识 @，但 VS Code 不认识。
在项目根目录新建 jsconfig.json：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
保存后飘红消失，Ctrl + 点击直接跳转源文件。这是新手配别名必踩的坑，记住口诀：Vite 配 alias，jsconfig 补路径。
六、package.json 里的三条命令
{
"scripts": {
"dev": "vite", // 开发环境，日常写代码用
"build": "vite build", // 生产打包，输出 dist 目录
"preview": "vite preview" // 本地预览打包结果，模拟上线效果
}
}
日常开发用 dev，项目做完上线前执行 build，把 dist 文件夹交给运维（部署篇会手把手讲 Nginx 配置）。
七、踩坑记录
八、今日小结
- Vite 开发阶段不打包、按需编译，所以启动快；上线用 Rollup 完整打包
- 热更新 HMR 保留页面状态，改样式组件不重新挂载
- @ 别名 = vite.config.js 的 alias + jsconfig.json 的 paths
- 三条命令：dev 开发、build 打包、preview 预览
作者：陈志宝
下篇预告
下一篇正式进入语法世界：模板语法初识——插值表达式 {{ }}、v-bind、v-on 首次登场。
