Vite 基础入门：从零到一构建现代化前端项目

在今天这个前端技术日新月异的时代，构建工具已成为任何一个前端项目的标准配置。从 Webpack 到 Rollup，再到现代的 Vite，这些工具的核心目标始终未变：解决前端工程化中的模块化、语法编译、代码质量和开发效率等痛点。

在众多工具中，Vite (法语，意为“快速”) 以其卓越的性能脱颖而出，全球开发者满意度超过98%。它通过两大杀手锏彻底改变了前端开发体验：

开发服务器 (Dev Server)： Vite 利用现代浏览器对原生 ES 模块 (ESM) 的支持，实现了 no-bundle (非打包) 的开发模式。它会直接将你的源代码文件（如 .js, .ts, .vue 文件）提供给浏览器，由浏览器按需加载模块，从而达到几乎瞬时的项目启动速度。
构建 (Build)： 在生产环境中，Vite 使用成熟的打包工具 Rollup 进行代码打包。Rollup 尤其擅长对 ESM 进行 Tree-shaking，确保最终产物的体积最小化。Vite 还会自动配合Babel 等工具链，确保最终产物的质量和兼容性。

一、环境准备

在开始之前，请确保开发环境满足以下要求：

Node.js: Vite 5 (目前主流版本) 要求 Node.js 18.0.0 或 20.0.0 及以上版本。你可以使用 node -v 命令检查当前版本。
包管理器: 强烈推荐使用 pnpm。相较于 npm 或 yarn，pnpm 在性能、磁盘空间利用（通过硬链接/符号链接共享依赖）和依赖管理严格性上都有显著优势。

可以通过以下命令安装 pnpm 并配置国内镜像源以获得更快的下载速度：

Bash

# 安装 pnpm
npm i -g pnpm

# 设置国内镜像源
pnpm config set registry https://registry.npmmirror.com/

二、创建第一个 Vite + Vue 项目

环境就绪后，我们就可以通过一行命令快速创建一个新的 Vite 项目：

Bash

pnpm create vite

执行该命令后，终端会进入一个交互式流程，引导你完成项目的基本设置：

Project name: 输入你的项目名称，例如 vite-vue-project。
Select a framework: 使用方向键选择 vue。
Select a variant: 选择框架的变体。我们选择 vue-ts (Vue + TypeScript)，这是目前 Vue 3 社区的最佳实践。

完成后，根据提示进入项目目录，安装依赖并启动开发服务器：

Bash

# 1. 进入项目目录
cd vite-vue-project

# 2. 安装依赖
pnpm install

# 3. 启动项目
pnpm run dev

当你在终端看到类似下面的输出时，说明项目已成功启动：

  vite v5.x.x dev server running at:

  > Local: http://localhost:5173/
  > Network: use --host to expose

  ready in 312ms.

(注意：Vite 默认端口可能已从 3000 变为 5173)

在浏览器中打开 http://localhost:5173，你就能看到 Vue 项目的欢迎页面了。

三、理解项目启动流程：Vite 为何如此之快？

Vite 的速度魔法源于它独特的 no-bundle 理念。让我们深入了解其工作原理。

以 index.html 为入口: 与传统打包工具（入口是 JS 文件）不同，Vite 在开发模式下将项目根目录的 index.html 作为应用程序的入口文件。当你访问开发服务器时，Vite 首先返回的就是这个 HTML 文件的内容。
原生 ES 模块加载: 在生成的 index.html 中，你会看到这样一行关键代码：
HTML
```
<script type="module" src="/src/main.ts"></script>
```
type="module" 这个属性告诉浏览器，要以原生 ES 模块（ESM）的方式加载这个脚本。浏览器会解析这个文件，并自动处理其中的 import 语句，将其作为新的 HTTP 请求发送出去。
Vite 开发服务器的魔法 (重点):
- 当浏览器请求 /src/main.ts 时，Vite 的开发服务器会拦截这个请求。它会实时地读取文件内容，执行必要的编译（例如，将 TypeScript 转换为浏览器可以理解的 JavaScript），然后将结果返回给浏览器。
- 在 main.ts 中，浏览器会遇到 import App from './App.vue'。浏览器会再次发起一个 HTTP 请求，去获取 /src/App.vue 文件。
- Vite 服务器再次拦截这个请求。这次它识别出这是一个 .vue 文件（Vue 单文件组件，SFC）。Vite 会实时地解析这个文件，将其中的 <template>, <script setup lang="ts"> 和 <style> 拆分开。
- 它会即时编译 <template> 为渲染函数 (Render Function)，编译 <script setup> 为 JavaScript，处理 <style> (例如，如果是 Scoped CSS，则添加 data 属性)。
- Vite 将编译后的 JavaScript 和 CSS (通过 HMR 机制注入) 返回给浏览器。
- 这个过程会持续进行，直到所有需要的模块都加载完毕。

这个流程完全省略了传统工具在启动前需要打包整个应用的耗时过程，实现了真正的按需编译和按需加载，这也是 Vite 开发服务器启动速度极快的核心原因。

四、核心功能与配置

Vite 不仅快，而且功能强大，开箱即用地支持许多现代化开发所需的功能。所有配置通常在项目根目录的 vite.config.ts 文件中进行。

1. Vue 插件 (The Bridge)

当你使用 pnpm create vite 并选择 vue 时，vite.config.ts 文件中会自动为你配置好 @vitejs/plugin-vue。

TypeScript

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue() // 这个插件是连接 Vite 和 Vue SFC 的桥梁
  ],
  // ... 其他配置
})

这个插件是 Vite 能够理解和编译 .vue 文件的关键。它处理了上面提到的所有 SFC 编译工作，包括模板编译、<script setup> 语法糖、Scoped CSS 等。

2. 依赖预构建 (Dependency Pre-building)

尽管 Vite 对源码采用 no-bundle 策略，但它会对第三方依赖（node_modules 中的代码）进行预构建。这么做主要有两个目的：

格式兼容： 许多第三方库以 CommonJS 或 UMD 格式发布，Vite 需要将它们转换为浏览器支持的 ESM 格式。
性能优化： 一些库（如 lodash-es）内部包含大量的小模块文件。如果不打包，加载一个函数可能会触发上百个 HTTP 请求。预构建将这些库打包成单个或少数几个文件，大大减少了请求数量。

这个过程由速度极快的 esbuild 在首次启动服务器时自动完成，并将结果缓存于 node_modules/.vite 目录中。

在某些情况下，Vite 的扫描器可能无法自动发现所有依赖（例如动态 import()）。这时，你可以通过 optimizeDeps.include 选项来手动指定需要预构建的包：

TypeScript

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

export default defineConfig({
  optimizeDeps: {
    include: [
      'object-assign', // 强制预构建 object-assign
      'element-plus/es/components/message/style/css' // 某些 UI 库的样式可能也需要
    ],
  }
});

3. 处理样式 (Vue 的方式)

Vite 对现代 CSS 工程化方案提供了出色的内置支持。

CSS 预处理器 (Sass/Less/Stylus)

Vite 开箱即用地支持它们。你只需安装对应的依赖（如 sass）即可。

Bash

pnpm i sass -D

之后，就可以直接在 .vue 文件的 <style> 标签中使用了：

代码段

<style lang="scss" scoped>
/* 你的 SCSS 代码 */
$primary-color: #42b983;
.header {
  color: $primary-color;
}
</style>

如果想实现全局 SCSS 变量的自动注入，可以配置 css.preprocessorOptions：

TypeScript

// vite.config.ts
import path from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // additionalData 的内容会在每个 SCSS 文件的开头自动注入
        additionalData: `@import "${path.resolve(__dirname, 'src/styles/variable.scss')}";` 
      }
    }
  }
});

SFC 中的样式：Scoped 与 Module

Vue SFC 提供了两种强大的样式隔离方案，Vite 都完美支持：

Scoped CSS (作用域样式): 这是 Vue 最常用的功能。只需在 <style> 标签添加 scoped 属性，Vite (通过 @vitejs/plugin-vue) 就会自动为该组件的 DOM 元素和 CSS 规则添加唯一的 data 属性（如 data-v-xxxxxx），确保样式只对当前组件生效，避免全局污染。
代码段
```
<template>
  <p class="my-text">Hello</p>
</template>

<style scoped>
/* 这个 .my-text 只会作用于当前组件的 <p> 标签 */
.my-text {
  color: red;
}
</style>
```

CSS Modules: 如果你需要更精细的控制或与 JS 交互，可以在 <style> 标签添加 module 属性。Vite 会将这部分样式编译为 CSS Modules，并自动在组件实例中注入一个 $style 对象，你可以通过它来动态绑定类名。

代码段

<template>
  <p :class="$style.header_title">This is Header</p>
</template>

<script setup lang="ts">
// $style 对象是自动注入的，无需 import
// 它看起来会是 { header_title: 'index_header_title_1abcde' }
</script>

<style module>
/* 类名会被哈希化，例如 .header_title -> .index_header_title_1abcde */
.header_title {
  font-size: 20px;
  font-weight: bold;
}
</style>

PostCSS

Vite 内置了 PostCSS 支持。你可以直接在 vite.config.ts 中配置插件，比如添加 autoprefixer 来自动处理浏览器前缀。

Bash

pnpm i autoprefixer -D

TypeScript

// vite.config.ts
import autoprefixer from 'autoprefixer';
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
        })
      ]
    }
  }
});

4. 处理静态资源

在 Vite 中处理图片、字体等静态资源非常直观。

直接引入

你可以在 <script setup> 中 import 静态资源，Vite 会返回该资源在服务时的公共路径。

代码段

<template>
  <img :src="logoSrc" alt="Vite Logo" />
</template>

<script setup lang="ts">
// @assets 是下面配置的路径别名
import logoSrc from '@assets/imgs/vite.png';
</script>

路径别名 (Alias)

为了避免复杂的相对路径 (../../...)，配置路径别名是最佳实践：

TypeScript

// vite.config.ts
import path from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src'), // @ 符号指向 src 目录
      '@assets': path.join(__dirname, 'src/assets')
    }
  }
});

(注意：使用 TS 时，还需要在 tsconfig.json 的 compilerOptions.paths 中同步配置别名，以获得 VScode 的路径提示。)

SVG 作为组件

在 Vue 项目中，我们经常希望将 SVG 作为组件来导入，以便控制其颜色、大小等。这可以通过 vite-svg-loader 插件实现。

Bash

pnpm i vite-svg-loader -D

配置 vite.config.ts：

TypeScript

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import svgLoader from 'vite-svg-loader' // 1. 引入

export default defineConfig({
  plugins: [
    vue(),
    svgLoader() // 2. 注册插件
  ],
})

使用方式：

代码段

<template>
  <div>
    <LogoIcon class="logo-class" />
  </div>
</template>

<script setup lang="ts">
// 默认导入的就是 Vue 组件
import LogoIcon from '@assets/icons/logo.svg';
</script>

五、保证代码质量：集成 Lint 工具链

一个专业的项目离不开代码规范。Vite 项目可以与主流的 Lint 工具链无缝集成。

ESLint + Prettier:
- ESLint: 用于检查 JavaScript/TypeScript 代码的质量和风格问题。在 Vue 项目中，核心是 eslint-plugin-vue，它能够解析 .vue 文件的 <script> 部分，并检查 Vue 的特定语法（如指令、生命周期等）。
- Prettier: 专注于代码格式化（如缩进、分号、换行）。
- 两者结合使用是社区的最佳实践（通过 eslint-config-prettier 禁用掉 ESLint 中与 Prettier 冲突的规则）。
Stylelint: 这是一个专门用于检查样式文件（CSS, SCSS, Less）的工具，也可以配置来检查 .vue 文件中的 <style> 块。
Git 钩子 (Hooks): 为了确保提交到代码库的代码都是符合规范的，我们可以使用 husky 和 lint-staged。
- husky 允许我们在 git commit 等操作前执行脚本。
- lint-staged 则可以确保只对本次提交中被修改过的文件（暂存区中的文件）执行 Lint 检查，极大地提升了效率。
提交信息规范: 使用 commitlint 可以规范团队的 Git 提交信息，使其更具可读性，便于后续追溯和生成更新日志。

六、生产环境构建

当开发完成后，我们需要将项目打包用于线上部署。

执行构建

运行 pnpm run build 命令。Vite 会使用 Rollup 对你的代码进行打包、Tree-shaking、代码压缩、CSS 提取等一系列优化，生成最终的静态文件（默认在 dist 目录中）。

类型检查 (Vue + TS)

在 vue-ts 项目的 package.json 的 build 脚本中，你通常会看到：

JSON

"scripts": {
  "build": "vue-tsc --noEmit && vite build"
}

这里的 vue-tsc --noEmit 是关键。

tsc 是 TypeScript 的官方编译器，但它默认不理解 .vue 文件。
vue-tsc 是一个基于 tsc 的命令行工具，它封装了 tsc，使其能够正确解析 .vue 文件中的 TypeScript 代码。
--noEmit 标志告诉 vue-tsc 只进行类型检查，而不生成任何 JavaScript 文件（因为生成文件的工作将由 vite build 来完成）。

这个命令确保了在打包前，你所有的 .ts 和 .vue 文件都通过了 TypeScript 的类型检查，极大地保证了代码的健壮性。

预览产物

构建完成后，可以运行 pnpm run preview 来启动一个本地静态服务器，预览生产环境构建后的效果。

菜单

分享

Vite 基础入门：从零到一构建现代化前端项目

一、环境准备

二、创建第一个 Vite + Vue 项目

三、理解项目启动流程：Vite 为何如此之快？

四、核心功能与配置

1. Vue 插件 (The Bridge)

2. 依赖预构建 (Dependency Pre-building)

3. 处理样式 (Vue 的方式)

CSS 预处理器 (Sass/Less/Stylus)

SFC 中的样式：Scoped 与 Module

PostCSS

4. 处理静态资源

直接引入

路径别名 (Alias)

SVG 作为组件

五、保证代码质量：集成 Lint 工具链

六、生产环境构建

执行构建

类型检查 (Vue + TS)

预览产物

评论

Vue3的多种组件通信方式

编制真的就是稳定吗？

Vite 基础入门：从零到一构建现代化前端项目

Webpack的优化配置

前端三栏布局完全指南

Eslint, Prettier 与 Husky 详细配置

计网基础：从TCP/UDP到HTTP/3

浏览器同源策略 (SOP) 与跨域解决方案

Object.defineProperty 到 Proxy：Vue的响应式

使用 OpenAI 调用 AI 模型：流式与非流式指南