第五章：Vite — 现代前端构建工具

这是进阶篇的核心一章。搞懂了 Vite，你就理解了现代前端项目”为什么要跑起来”、以及那条 npm run dev 背后发生了什么。

Vite 读作 /vit/（法语”快”的意思），别念成”vight”。

5.1 一个痛点：浏览器看不懂 .vue

先思考一个问题。你写的 App.vue 文件长这样：

<template>
  <h1>{{ title }}</h1>
</template>

<script setup>
import { ref } from 'vue'
const title = ref('你好')
</script>

现在把这个 .vue 文件直接丢给浏览器打开，能跑吗？

不能。 因为浏览器只认三样东西：HTML、CSS、原生 JS。它完全看不懂：

• .vue 这种文件格式（把 HTML/JS/CSS 混在一起）
• <template>、{{ title }} 这些 Vue 的特殊语法
• 有时甚至连 import 都需要处理

中间必须有一个”翻译官”，把 .vue 文件翻译成浏览器能懂的普通 HTML / CSS / JS。

这个翻译官，就是 Vite。 （这类工具统称”构建工具”。）

5.2 Vite 的两个身份

Vite 在你的项目里其实扮演两个角色，分别对应两条命令。

身份一：开发服务器（npm run dev）

当你敲 npm run dev，Vite 会：

1. 在你本地启动一个小型网站服务器，给你一个网址（通常是 http://localhost:5173）
2. 实时把你的 .vue 文件翻译好，喂给浏览器显示
3. 你一改代码保存，浏览器立刻更新（这个能力叫热更新，下面讲）

一句话：npm run dev = 开一个”边写边看”的实时预览环境。开发阶段全程用它。

身份二：打包工具（npm run build）

项目写完了要上线，让全世界的人访问。这时敲 npm run build，Vite 会：

1. 把所有 .vue、import、图片等，全部翻译、压缩、优化
2. 打包成一堆浏览器能直接跑的纯 HTML / CSS / JS 文件
3. 统一放进一个叫 dist/ 的文件夹里

这个 dist/ 文件夹，就是最终能部署到服务器上的成品。

一句话总结两个身份： 开发时（dev）帮你实时预览，上线前（build）帮你打包成品。

5.3 Vite 为什么快

Vite 出名就是因为一个字：快。为什么快？（了解即可，不用深究）

老工具的做法（如 Webpack）

以前的构建工具（比如 Webpack）在启动开发服务器时，会先把整个项目所有文件全部翻译打包一遍，再让你预览。项目越大，启动越慢，大项目启动等个几十秒很常见。

Vite 的做法：按需编译

Vite 反过来：启动时几乎不打包，你的浏览器请求哪个页面、用到哪个文件，它才现翻译那个文件。用不到的先不管。

所以不管项目多大，Vite 启动几乎都是秒开。

类比：Webpack 像”把整本书全部翻译完再给你看”，Vite 像”你翻到哪一页，才翻译哪一页”。

热更新（HMR）

还有个让你爽到的功能叫 HMR（Hot Module Replacement，热更新）：

开着 npm run dev 时，你改一行代码、按保存，浏览器会立刻显示新效果，而且不用刷新整个页面、不丢失当前状态。改样式、改文字，几乎是实时反馈。

5.4 dev 和 build 分别在干嘛

把这两条最核心的命令再钉死一次：

还有个 npm run preview（部分项目有）：在本地预览 build 打包后的成品，检查上线效果，了解即可。

这两条命令，本质就是第三章讲的 package.json > scripts 里配置的：

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

现在你彻底懂了：敲 npm run dev，其实就是让 npm 去运行 Vite 的开发服务器。一切都串起来了。

5.5 小结

• 浏览器只认 HTML / CSS / 原生 JS，看不懂 .vue，需要一个”翻译官”（构建工具）
• Vite 就是这个翻译官，它有两个身份：
  • 开发服务器（npm run dev）：实时翻译 + 热更新，开发时用
  • 打包工具（npm run build）：压缩优化成 dist/ 成品，上线前用
• Vite 快的秘诀是按需编译（用到哪个翻译哪个），以及热更新 HMR（改完秒生效）
• npm run dev / npm run build 就是 package.json 里 scripts 配的命令

理论讲透了，下一章我们动手：不用任何脚手架模板，从零用 Vite 搭一个能跑的 Vue Demo，把这几章的知识全部串起来。