先说明一下：标题提到的Vite 3.0/4.0在本文写作时（2022年1月）尚未正式发布，目前Vite的稳定版是2.x。本文基于Vite 2.x的实际使用经验，写一篇从零开始的Vite入门指南。这些知识也适用于未来的Vite 3.0/4.0版本，因为Vite的核心概念和用法是一致的。

Vite是Vue作者尤雨溪开发的新一代前端构建工具，以极快的冷启动和热更新著称。这两年Vite越来越火，很多新项目都开始用Vite，甚至一些老项目也在从Webpack迁移到Vite。

如果你还没用过Vite，或者刚接触Vite，这篇入门指南就是为你准备的。本文会从零开始，一步步教你使用Vite，涵盖安装、项目创建、配置、插件、开发、构建等全流程。

一、Vite是什么

在开始之前，先了解一下Vite是什么，以及它为什么快。

Vite（法语意思是"快"，发音类似"vit"）是一个新一代前端构建工具，由两部分组成：

  1. 开发服务器：基于浏览器原生ES模块，提供丰富的内置功能，启动速度极快
  2. 构建命令：使用Rollup打包，输出高度优化的静态资源

Vite为什么快？

传统的构建工具（比如Webpack）在开发时需要先把所有模块打包成一个bundle，然后启动开发服务器。项目越大，打包越慢，启动一次可能要几十秒甚至几分钟。

Vite的做法不一样。它在开发时利用浏览器原生的ES模块支持，不需要打包。浏览器请求哪个模块，Vite就实时编译哪个模块，按需提供。所以不管项目多大，冷启动都是毫秒级的。

热更新（HMR）也很快。Vite只需要重新编译变更的模块，然后通过WebSocket通知浏览器更新，不需要刷新整个页面，也不需要重新打包。

简单说，Vite的快，是因为它在开发时不打包，按需编译。

二、环境准备

在使用Vite之前，需要准备好开发环境。

1. 安装Node.js

Vite需要Node.js 12.0.0以上版本，推荐用14.x或16.x的LTS版本。

检查Node版本：

node -v
npm -v

如果没装Node.js，去官网下载安装：https://nodejs.org/

2. 包管理器

Vite支持npm、yarn、pnpm三种包管理器。推荐用pnpm，速度快、省磁盘空间。但npm也可以，本文以npm为例。

安装pnpm（可选）：

npm install -g pnpm

3. 编辑器

推荐用VS Code，配合Volar（Vue）或ES7+ React/Redux插件，开发体验更好。

三、创建第一个Vite项目

Vite提供了脚手架工具，可以快速创建项目。

方法一：用create-vite创建（推荐）

npm create vite@latest

运行后会交互式提示：

  1. 输入项目名（比如my-vite-app）
  2. 选择框架（vanilla、vue、react、preact、svelte、solid等）
  3. 选择变体（JavaScript或TypeScript）

然后按提示安装依赖、启动项目：

cd my-vite-app
npm install
npm run dev

方法二：一行命令创建

也可以直接指定模板，不用交互式：

npm create vite@latest my-vue-app -- --template vue

常用模板：

  • vanilla：原生JS
  • vue：Vue 3
  • vue-ts：Vue 3 + TypeScript
  • react：React
  • react-ts：React + TypeScript
  • preact：Preact
  • svelte：Svelte

启动项目

npm run dev

启动后，终端会显示本地地址（默认http://localhost:5173），在浏览器打开就能看到项目了。

试试修改src/App.vue（或App.jsx），保存后页面会自动更新，这就是Vite的热更新（HMR），速度非常快。

四、项目结构

创建好的项目结构大概是这样的（以Vue为例）：

my-vite-app/
├── node_modules/       # 依赖
├── public/             # 静态资源（不经过构建，直接复制）
│   └── favicon.ico
├── src/
│   ├── assets/         # 资源文件（图片、样式等）
│   ├── components/     # 组件
│   ├── App.vue         # 根组件
│   ├── main.js         # 入口文件
│   └── style.css       # 全局样式
├── index.html          # HTML入口文件
├── package.json        # 项目配置
├── vite.config.js      # Vite配置文件
└── README.md

几个关键点：

  • index.html是入口文件，在项目根目录，而不是public里。Vite会解析这个HTML，找到里面的<script type="module" src="/src/main.js">作为入口。
  • public/目录里的文件不经过构建，直接复制到输出目录，用根路径访问（比如/favicon.ico）。
  • src/里的文件会经过构建处理，支持导入CSS、图片等资源。

五、Vite配置详解

Vite的配置文件是vite.config.js（或.ts），在项目根目录。

一个基本的配置：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist'
  }
})

defineConfig是一个工具函数，提供类型提示，推荐用它包裹配置对象。

常用配置项：

1. plugins（插件）

plugins: [vue(), react()]

Vite的功能通过插件扩展。Vue项目需要@vitejs/plugin-vue，React项目需要@vitejs/plugin-react。还有很多社区插件，后面会讲。

2. server（开发服务器）

server: {
  port: 3000,          // 端口号，默认5173
  open: true,          // 启动时自动打开浏览器
  host: true,          // 监听所有地址，允许局域网访问
  proxy: {             // 代理配置
    '/api': {
      target: 'http://localhost:3001',
      changeOrigin: true
    }
  }
}

代理配置很常用，解决开发时的跨域问题。前端请求/api/xxx会被代理到http://localhost:3001/api/xxx。

3. resolve（路径解析）

resolve: {
  alias: {
    '@': '/src'        // 路径别名，@指向src目录
  }
}

配置别名后，导入组件可以写import App from '@/App.vue'，不用写长长的相对路径。

4. build（构建配置）

build: {
  outDir: 'dist',           // 输出目录
  assetsDir: 'assets',      // 静态资源目录
  sourcemap: true,          // 生成sourcemap
  minify: 'esbuild',        // 压缩方式，esbuild或terser
  rollupOptions: {          // Rollup配置
    output: {
      manualChunks: {       // 代码分割
        vendor: ['vue', 'vue-router']
      }
    }
  }
}

5. css（CSS配置）

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@/styles/variables.scss";`
    }
  }
}

配置CSS预处理器（SCSS、Less等）的全局变量。

六、静态资源处理

Vite对静态资源的处理很方便。

1. 导入图片

import logo from './assets/logo.png'
// logo就是图片的URL，可以直接用在img的src里

在CSS里也可以用：

.logo {
  background: url('./assets/logo.png');
}

小图片（默认4KB以下）会被转成base64内联，减少HTTP请求。大图片会被打包成文件，返回URL。

2. 导入CSS

import './style.css'

直接导入CSS，Vite会自动处理。支持CSS Modules、SCSS、Less、Stylus等，只需要安装对应的预处理器：

npm install -D sass  # SCSS
npm install -D less  # Less

3. public目录

public/目录里的文件不经过构建，直接复制到输出目录。用根路径访问：

<img src="/favicon.ico" />

适合放不需要处理的静态资源，比如favicon、robots.txt等。

七、常用插件推荐

Vite的生态越来越丰富，推荐几个常用插件。

1. @vitejs/plugin-vue

Vue 3官方插件，支持Vue单文件组件。Vue项目必备。

2. @vitejs/plugin-react

React官方插件，支持React Fast Refresh。

3. unplugin-auto-import

自动导入API，不用手动import。比如Vue的ref、computed，直接用就行，插件自动导入。

npm install -D unplugin-auto-import
import AutoImport from 'unplugin-auto-import/vite'

plugins: [
  AutoImport({ imports: ['vue', 'vue-router'] })
]

4. unplugin-vue-components

自动导入Vue组件，不用手动import和注册。配合UI组件库（Element Plus、Ant Design Vue）使用，能自动按需导入组件和样式。

5. vite-plugin-pages

基于文件系统的路由，类似Nuxt.js。在src/pages目录下创建vue文件，自动生成路由。

6. vite-plugin-compression

构建时自动生成gzip或brotli压缩文件，配合Nginx使用，提升加载速度。

7. vite-plugin-mock

开发时的mock数据工具，不用起单独的mock服务器。

八、开发和构建

开发模式：

npm run dev

启动开发服务器，支持热更新，修改代码后页面自动更新。

构建生产版本：

npm run build

构建完成后，产物在dist/目录。Vite用Rollup打包，会做代码分割、压缩、tree-shaking等优化。

预览构建结果：

npm run preview

本地启动一个静态服务器，预览构建后的产物，用来测试生产构建是否正常。

九、环境变量

Vite内置了环境变量支持。

在项目根目录创建.env文件：

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

注意：只有VITE_开头的变量才会暴露给客户端代码。

代码里用import.meta.env访问：

console.log(import.meta.env.VITE_API_URL)

也可以创建不同环境的文件：

  • .env.development：开发环境
  • .env.production：生产环境

Vite会根据当前模式自动加载对应的文件。

十、从Webpack迁移到Vite

如果你有Webpack项目想迁移到Vite，大致步骤：

  1. 安装Vite和对应框架的插件
  2. 把public/index.html移到项目根目录，修改script的src为/src/main.js
  3. 修改package.json的scripts，把webpack-dev-server改成vite，webpack改成vite build
  4. 把Webpack的配置（别名、代理等）迁移到vite.config.js
  5. 处理一些Webpack特有的语法（比如require.context），Vite用import.meta.glob代替
  6. 测试开发和构建，修复问题

迁移过程中可能会遇到一些兼容性问题，但大部分项目都能顺利迁移。迁移后，开发体验会有质的提升。

十一、常见问题

Q：Vite和Webpack怎么选？ A：新项目推荐Vite，启动快、热更新快、配置简单。老项目如果Webpack用得好好的，不一定要迁移，迁移需要成本。

Q：Vite支持IE吗？ A：Vite开发时不支持IE（因为用了ES模块）。生产构建可以用@vitejs/plugin-legacy支持旧浏览器，但会增加包体积。

Q：Vite能做SSR吗？ A：Vite支持SSR，但需要自己配置。如果需要SSR，推荐用Nuxt 3（Vue）或Next.js（React），它们基于Vite，封装好了SSR。

Q：Vite构建慢怎么办？ A：Vite构建用Rollup，大项目构建可能慢。可以用rollup-plugin-visualizer分析包体积，做代码分割。也可以试试Vite的实验性特性，或者用esbuild做部分优化。

十二、写在最后

Vite是前端构建工具的一次革新，它的快，用过就回不去了。配置简单、启动飞快、热更新丝滑，这些都让前端开发体验提升了一个档次。

这篇入门指南覆盖了Vite的基本用法，从项目创建到配置、插件、构建，应该能帮你快速上手。Vite的功能还有很多，比如SSR、库模式、插件开发等，需要在实际项目中深入学习。

2022年了，Vite还在快速发展，3.0、4.0版本会带来更多改进。但核心概念是稳定的，现在学Vite，未来的版本也能用。

如果你还在用Webpack，不妨试试Vite，也许会有惊喜。如果你已经在用Vite，希望这篇文章能帮你更系统地了解它。

最后，推荐几个学习资源：

  • Vite官方文档：https://vitejs.dev/
  • Vite中文文档：https://cn.vitejs.dev/
  • awesome-vite：Vite相关资源集合

祝大家开发愉快，构建飞快。