S14-B05 · 工程化入门：Vite 与路径别名

适用读者：被 ../../../ 折磨、或疑惑"Vite 为什么快"的人。
前置：S14-B04。
覆盖旧文：347（Path Alias，40 点）。
覆盖扩展：E-S14-013（Vite 开发态原理）。
上一篇：S14-B04 · 样式方案：Tailwind 与 Animate.css
下一篇：S14-J01 · Vue Router。

1. 一句话结论

Vite 开发态用"浏览器原生 ESM + 按需编译"，所以启动快；生产态用 Rollup 打包。路径别名（@/）只是"构建期替换"，需要同时配两处。

2. Vite 开发/生产的两种模式

阶段	机制	为什么快/慢
开发	原生 ESM，浏览器请求哪个模块就编译哪个	不打包，启动秒级
生产	Rollup 打包 + 压缩 + 拆分	产物小、请求少

"为什么 Webpack 开发慢"：它要把整个依赖图打包后才启动——项目越大越慢。

3. 路径别名：必须配两处（E-S14-013）

// vite.config.js
import { fileURLToPath, URL } from 'node:url'
export default {
  resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }
}

位置	作用
`vite.config.js` 的 `resolve.alias`	构建与开发服务器能解析
`jsconfig.json` / `tsconfig.json` 的 `paths`	编辑器能跳转/补全

"只配一处会怎样"：只配 vite → 能跑但编辑器标红；只配 tsconfig → 编辑器正常但构建报错。

4. 常用配置项

配置	作用
`base`	部署子路径（如 `/blog/`）
`build.outDir`	产物目录
`build.sourcemap`	生产是否出 sourcemap（安全/体积权衡）
`server.proxy`	开发代理（解决跨域）
`build.rollupOptions.output.manualChunks`	手动拆包（J02）

server.proxy 的典型用法：

server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } }

5. 五个误区

误区	真相
"Vite 生产也用 ESM"	生产仍打包（Rollup）
"别名只配 vite 就够"	编辑器需要 tsconfig paths
"开发快等于构建快"	构建仍需打包时间（实测约 3s）
"sourcemap 一定要开"	生产会泄露源码结构
"proxy 只用于跨域"	也用于统一路径前缀

6. 自检

Vite 开发态为什么快？
路径别名要配哪两处？只配一处会怎样？
base 什么时候需要改？
生产开 sourcemap 的风险？
server.proxy 解决什么问题？

7. 下一篇

S14-J01 · Vue Router：模式与进阶

工程化讲完，进阶层开始：SPA 路由的两种模式与真实差异。

本篇属于系列《S14 · 前端与可视化》。旧文来源：A-347；扩展点 E-S14-013。