Vite 项目解剖

上一篇项目已经跑起来了，但里面每个文件是干什么的，你可能还一头雾水。这一篇我们逐个拆解 Vite 项目的骨架，重点是理解它和 Webpack 类工具一个非常不同的设计，HTML 才是入口。

index.html 是入口文件

在 Webpack 里，入口通常是 src/index.js，HTML 只是模板。Vite 反过来，把 index.html 当作应用的入口。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

关键在这一行：

<script type="module" src="/src/main.js"></script>

type="module" 告诉浏览器这是 ES Module，浏览器会顺着这个脚本去加载 src/main.js，再由此加载它依赖的所有模块。Vite 的开发服务器就是围绕这个 HTML 入口来工作的，它会拦截这些请求并实时编译返回。

src 目录放源代码

src（source 的缩写）存放你写的全部源码，包括 JS、CSS、组件、图片等。Vite 不会对 src 里的文件做特殊拷贝，而是按模块依赖关系在运行时或构建时处理它们。

以 Vanilla 模板为例：

// src/main.js
import './style.css'
import { setupCounter } from './counter.js'

setupCounter(document.querySelector('#app'))

注意第一行的 import './style.css'，在 Vite 里你可以直接把 CSS 当成模块 import 进来，Vite 会自动处理它的注入，这是传统写法没有的便利。

public 目录放静态资源

有些文件你希望「原封不动」地出现在最终产物里，比如 favicon.ico、固定的 robots.txt、或者需要按固定路径引用的图片。把它们放进 public 目录即可。

Vite 在构建时会把 public 里的文件完整拷贝到输出目录根下。
在代码里引用时，路径以 / 开头，例如 /favicon.ico，它会直接指向 public 中的同名文件。

<link rel="icon" href="/favicon.ico" />

注意，放在 public 里的文件不会被 Vite 做哈希命名和压缩，所以大文件不要放这里，应该用后面讲的「作为模块导入」的方式处理。

package.json 里的脚本命令

创建项目后，package.json 里会有几个脚本，这是你日常最常用的命令入口。

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

npm run dev 启动开发服务器。
npm run build 构建生产版本，产物默认在 dist 目录。
npm run preview 在本地预览构建后的产物，用于上线前自查。

vite.config.js 配置文件登场

不是所有模板都默认带 vite.config.js，但你可以自己创建它。这是 Vite 的「控制面板」，后面一篇会专门讲。现在你只需要知道，plugins、server、build 这些能力都在这文件里配置。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // 配置写在这里
})

Vite 如何加载第一个页面

把前面串起来，浏览器打开本地地址后，整个加载过程是：

服务器返回 index.html。
浏览器遇到 type="module" 的脚本，请求 /src/main.js。
Vite 实时编译 main.js 及其依赖（如 style.css、counter.js）并返回。
浏览器继续执行，页面渲染完成。
之后你改任意文件，Vite 只把改动模块推回来，页面局部更新。

这个「HTML 为入口、浏览器按需拉模块」的链路，正是 Vite 又快又简单的根本原因。

本篇小结

HTML 是 Vite 的入口，靠 type="module" 脚本拉起应用。
src 放源码，CSS 也能当模块 import。
public 放需要原样保留的静态资源，引用以 / 开头。
dev、build、preview 三个脚本覆盖开发到上线的主流程。

下一篇我们正式进入 vite.config.js，学会用配置定制属于你的 Vite。

Vite 搭建第一个项目

Vite 配置入门