Vite 全面解析：下一代前端构建工具

原创已于 2025-10-21 14:26:39 修改 · 1.4w 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2023-08-09 09:41:24 首次发布

Vue.js 专栏收录该内容

295 篇文章

订阅专栏

概述

Vite 是新一代前端开发与构建工具，能够显著提升前端开发体验。Vite 意在提供开箱即用的配置，同时它的插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

核心特点：

基于原生 ES 模块导入方式
极快的冷服务器启动
由 Vue 作者尤雨溪开发
提供完整的类型支持

尤雨溪在开发 vue3.0 时开发了 Vite，并表示自己"再也回不去 webpack 了"

核心架构

Vite 的构建机制

Vite 提供了一套原生 ESM 的 HMR API。具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。Vite 内置了 HMR 到 Vue.js 单文件组件（SFC）和 React Fast Refresh 中。

Vite 的组成

开发服务器 - 基于原生 ES 模块，提供丰富的内建功能，速度快，支持模块热更新（HMR）
构建指令 - 使用 rollup 打包代码，预配置，开箱即用，可输出用于生产环境的高度优化过的静态资源

为什么选择 Vite

主要优势

快速启动时间：传统工具（如 webpack）需要大量构建工作，Vite 利用浏览器对原生 ES 模块的支持，实现秒级启动
热模块替换（HMR）：修改代码后页面立即更新，无需手动刷新
高度可扩展：丰富的插件 API，可用于构建 Vue、React 等项目

安装和使用

环境要求

Node.js（建议使用最新版本）

安装方式

方式一：使用 create-vite

bash

npm install -g create-vite

# 创建项目
create-vite my-project
# 或使用默认名称
create-vite

方式二：直接安装 Vite

bash

npm install -g vite
# 或
yarn global add vite

# 创建项目
npm init vite-app my-project
# 或
yarn create vite-app my-project

项目结构

创建后的典型目录结构：

text

vite-project/
├── node_modules/
├── src/
├── public/
├── index.html
├── package.json
├── vite.config.js
└── ...其他配置文件

启动开发

bash

cd vite-project
npm install
npm run dev
# 或
yarn dev

核心功能详解

热更新功能

一旦启动开发服务器，就可以使用 Vite 的热更新功能加速开发流程。

示例：

vue

<template>
  <div>
    <h1>My Name is SteveRocket</h1>
    <p>Welcome to my <b>CTO Plus</b></p>
    <img src="../assets/wechat.png"/>
  </div>
</template>

保存后立即看到更新，无需重启服务。

构建和部署

bash

npm run build

生成优化过的生产版本，包括压缩代码、提取公共模块、生成文件指纹等。

环境变量配置

import.meta.env

Vite 在 import.meta.env 对象上暴露环境变量。

.env 文件配置

Vite 使用 dotenv 从环境目录加载额外环境变量：

文件加载顺序：

.env - 所有情况下都会加载
.env.local - 所有情况下都会加载，但会被 git 忽略
.[mode] - 只在指定模式下加载
.[mode].local - 只在指定模式下加载，但会被 git 忽略

环境加载优先级：

执行时已存在的环境变量（最高优先级）
指定模式的文件（如 .env.production）
通用形式的文件（如 .env）

安全注意事项

只有以 VITE_ 为前缀的变量才会暴露给客户端代码：

bash

# .env 文件示例
VITE_SOME_KEY=123
DB_PASSWORD=foobar

javascript

console.log(import.meta.env.VITE_SOME_KEY) // 123
console.log(import.meta.env.DB_PASSWORD)   // undefined

TypeScript 智能提示

在 src 目录下创建 env.d.ts 文件：

typescript

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多环境变量...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

HTML 环境变量替换

html

<h1>Vite is running in %MODE%</h1>
<p>Using data from %VITE_API_URL%</p>

模式配置

默认模式

开发服务器：development 模式
构建命令：production 模式

自定义模式

bash

vite build --mode staging

对应创建 .env.staging 文件。

配置详解

基本配置

在项目根目录创建 vite.config.js：

javascript

module.exports = {
  // 入口文件
  root: './src/main.js',
  // 输出目录
  build: {
    outDir: './dist',
  },
  // 代理设置
  server: {
    proxy: {
      '/api': 'http://localhost:3000',
    },
  },
};

CSS 配置

javascript

css: {
  // css预处理器
  preprocessorOptions: {
    scss: {
      additionalData: '@import "@/assets/style/mixin.scss";@import "@/assets/style/variable.scss";'
    }
  }
}

插件系统

插件安装示例

bash

npm install vite-plugin-prettier

插件配置

javascript

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

export default defineConfig({
  plugins: [
    vue(),
    prettier({
      // 插件选项
    }),
  ],
});

高级特性

依赖解析和构建

Vite 会检测所有裸模块导入并：

预构建 - 使用 esbuild 提高加载速度，将 CommonJS/UMD 转换为 ESM
重写导入 - 转换为合法的 URL

依赖预构建的目的

CommonJS 和 UMD 兼容性
性能优化 - 将多模块依赖转换为单个模块

文件系统缓存

缓存位置：node_modules/.vite
强制重建：使用 --force 选项或删除缓存目录

TypeScript 支持

Vite 天然支持引入 .ts 文件，使用 esbuild 进行转译，速度比 tsc 快 20-30 倍。

静态资源处理

导入方式：

javascript

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

使用 URL 构造器：

javascript

const imgUrl = new URL('./img.png', import.meta.url).href
document.getElementById('hero-img').src = imgUrl

动态 URL：

javascript

function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

CSS Modules

css

/* example.module.css */
.red {
  color: red;
}

javascript

import classes from './example.module.css'
document.getElementById('foo').className = classes.red

预处理器支持

安装相应依赖即可支持：

bash

# Sass
npm add -D sass

# Less
npm add -D less

# Stylus
npm add -D stylus

总结

Vite 是一个革命性的前端构建工具，通过：

原生 ESM 实现极速启动
高效的 HMR 提升开发体验
灵活的配置 满足各种需求
丰富的生态系统 支持多种框架和工具