Back

Vite+ 入门指南

Vite+ 入门指南

Vite+ 是由 VoidZero 推出的统一开发者工具链——该公司由 Vite 和 Vue 的创始人 Evan You 创立——它将 Vite、Vitest、Rolldown、Oxlint、Oxfmt、tsdown 和 Vite Task 整合在一个名为 vp 的单一 CLI 之后。该工具链于 2026 年 3 月 13 日以 alpha 版本正式发布;2026 年 5 月 13 日,v0.1.21 版本移除了 alpha 标签,截至本文撰写时,最新版本为 v0.1.23(2026 年 5 月 29 日)。该项目仍处于 1.0 之前的阶段,因此应将其视为早期软件,而非经过生产验证的技术栈——但它已不再是 alpha 版本,核心入门工作流已足够稳定,可用于实际项目。

本指南将带您完成 Vite+ 的安装、项目脚手架搭建、开发服务器启动、检查与测试执行、生产构建,以及了解 vp 如何融入典型的前端工作流。

核心要点

  • Vite+ 不是 Vite 8,也不会取代 Vite——Vite 8 是内置于 Vite+ 中的开发服务器和构建工具,而 Vite+ 是统一的 CLI 层,它将 Vite 与 Vitest、Rolldown、Oxlint、Oxfmt、tsdown 和 Vite Task 一同封装在 vp 命令之下。
  • 定义日常工作流的五个核心命令是:vp create(脚手架)、vp dev(开发服务器)、vp check(代码检查 + 格式化 + 类型感知检查)、vp test(Vitest)和 vp build(基于 Rolldown 的生产构建)。
  • vp devvp testvp build 是内置命令,可直接运行,不会读取 package.json 中的脚本;若要执行 package.json 中定义的自定义脚本,请使用 vp run <script-name>
  • 驱动 Vite+ 开发服务器和生产构建的 Vite 8 需要 Node.js 20.19 或更高版本,或 Node.js 22.12 或更高版本。
  • Oxfmt 仍处于 1.0 之前的阶段(Vite+ v0.1.23 中内置的版本为 v0.52.0),在将其应用于生产代码库之前,请先将其输出与现有的 Prettier 基准进行对比验证。

Vite+ 究竟是什么

Vite+ 是一个 CLI 发行版,它将一套精心挑选的前端工具整合在单一入口点之后。其中每个组件都是现有项目,而非全新发明:Vite 8 作为开发服务器,Rolldown 作为基于 Rust 且与 Rollup API 兼容的生产打包工具,Vitest 作为测试运行器,Oxlint 和 Oxfmt 作为构建于 Oxc 编译器基础设施之上的代码检查器和格式化工具,tsdown 用于库的打包,Vite Task 用于 monorepo 任务编排和缓存。

这些工具带来的性能提升是结构性的,而非叠加式的:Rolldown、Oxlint 和 Oxfmt 共享 Oxc——VoidZero 基于 Rust 的 JavaScript 编译器基础设施——作为公共的解析和转换层。速度的提升来自于底层引擎本身的高效,而非各工具的独立优化。

Vite+ 是对 Vite 的补充,而非替代。如果您已经在使用 Vite,可以逐步采用 Vite+;如果您尚未使用 Vite,Vite+ 并不是您的入门选择。

前置条件

在安装之前,请确认您的环境满足 Vite 8 的运行时要求。Vite 8 需要 Node.js 20.19 或更高版本,或 Node.js 22.12 或更高版本——Vite+ 不会替代 Node.js,它通过 vp env 管理项目使用的 Node.js 版本。在较旧的 Node.js 版本上运行 Vite+ 将在开发服务器启动前报错。

此外,您还需要在 macOS 或 Linux 上使用兼容 POSIX 的 Shell,或在 Windows 上使用 PowerShell。

安装 Vite+

Vite+ 以名为 vp 的单一二进制文件形式安装。在 macOS 或 Linux 上:

curl -fsSL https://vite.plus | bash

在 Windows PowerShell 上:

irm https://vite.plus/ps1 | iex

重启终端后,验证安装结果:

vp --version
vp help

安装过程中,Vite+ 会询问是否由其管理您的全局 Node.js 运行时。如果您已在使用 nvmfnmasdf,可以拒绝托管模式,Vite+ 将使用您系统中的 Node.js。您可以随时通过 vp env onvp env off 切换此设置。

创建您的第一个项目

vp create 基于 Vite+ 模板脚手架一个新项目,并以交互方式提示您选择框架、包管理器以及 TypeScript 或 JavaScript:

vp create

交互式提示允许您选择模板(Vite、Vue、Svelte、Nuxt、Next.js、React Router 或 TanStack Start)、包管理器(npm、pnpm、yarn、bun)以及 TypeScript 或 JavaScript。若要跳过提示,可直接传入模板名称:

vp create vue my-app
cd my-app
vp install

脚手架会生成一个单一的 vite.config.ts,用于存放工具链中所有工具的配置——代码检查器、格式化工具、测试运行器和暂存文件钩子均从该文件读取配置。

使用 vp dev 启动开发服务器

vp dev 以默认设置启动 Vite 8 开发服务器,常见场景下无需任何参数:

vp dev

vp dev 直接启动 Vite 8 开发服务器。它不会执行 package.json 中的 dev 脚本——这是一个常见的混淆点,其行为与 npm run dev 恰好相反。如果您的项目有自定义的 dev 脚本(例如,同时运行后端进程和前端的脚本),请显式调用它:

vp run dev

同样的规则适用于 vp testvp build:这些是通过 Vite+ 集成工具路由的内置命令。vp run <script> 是执行任意 package.json 脚本的逃生通道,使用 --cache 参数调用时还可获得 Vite Task 的输入感知缓存能力。

统一的 vite.config.ts

Vite+ 将其封装的所有工具的配置——Vite、Vitest、Oxlint、Oxfmt 以及暂存文件钩子——整合到项目根目录下的单一 vite.config.ts 中。您无需维护独立的 .eslintrc.prettierrcvitest.config.ts 文件,而是通过一个带类型的 defineConfig 调用来统一表达所有配置。

最简配置如下所示:

import { defineConfig } from 'vite-plus'

export default defineConfig({})

随着项目的增长,您可以逐步为各个工具添加配置:

import { defineConfig } from 'vite-plus'

export default defineConfig({
  fmt: {
    singleQuote: true,
    semi: false,
  },
  lint: {
    ignorePatterns: ['dist/**'],
  },
  test: {
    include: ['src/**/*.test.ts'],
  },
})

Vite+ 还支持通过 staged 配置块进行暂存文件检查:

import { defineConfig } from 'vite-plus'

export default defineConfig({
  fmt: { singleQuote: true, semi: false },
  lint: { ignorePatterns: ['dist/**'] },
  test: { include: ['src/**/*.test.ts'] },
  staged: {
    '*.{js,ts,tsx,vue,svelte}': 'vp check --fix',
  },
})

要启用提交时检查,请安装 Git 钩子:

vp config

此后,Vite+ 将通过 vp staged 在提交时自动运行已配置的暂存文件任务,无需单独配置 Husky 或 lint-staged。

与 Vite+ 的其他部分一样,配置系统在项目达到 1.0 之前仍在持续演进。如果您正在采用新版本,建议在升级前查阅官方文档和发布说明,以了解配置变更情况。

使用 vp check 运行检查

vp check 对当前项目一次性执行格式化、代码检查和类型感知检查:

vp check

若要自动修复可安全修复的问题:

vp check --fix

--fix 可处理大多数格式化问题和许多 lint 规则,但无法修复类型错误或逻辑缺陷。请将其视为自动修复工具,而非代码审查的替代品。类型检查由 tsgolint(基于 TypeScript Go 工具链构建的类型感知检查器)执行,而非完整的 tsc --noEmit 编译——对于捕获常见类型错误速度很快,但如果您在 CI 中需要全面的类型编译,它并不能替代 tsc。由于 Oxlint、Oxfmt 和 tsgolint 共享基于 Oxc 的基础设施,vp check 在同一代码库上的运行速度明显快于同等的 ESLint + Prettier + tsc --noEmit 工具链。

使用 vp test 运行测试

vp test 单次运行 Vitest 测试套件后退出——Vite+ 反转了 Vitest 默认保持监听模式的行为,使监听模式变为可选:

vp test                  # 单次运行(与 Vitest 不同,Vite+ 默认不启用监听模式)
vp test watch            # 进入监听模式
vp test run --coverage   # 单次运行并生成覆盖率报告

vp test 使用 vite.config.ts 中的 test 配置块调用 Vitest。请注意,这反转了 Vitest 的原生默认行为——单独运行 vp test 会在单次执行后退出,而独立运行 vitest 则会保持监听模式。由于 Vitest 已经共享 Vite 的转换管道,无需单独维护 vitest.config.ts——同一个 defineConfig 可同时覆盖两者。

使用 vp build 生成生产构建

vp build 使用 Vite 8 和 Rolldown 编译生产构建包,输出到 dist/ 目录,遵循与 vite build 相同的约定:

vp build

vp build 使用 Vite 8 和 Rolldown 编译生产构建包,输出遵循与 vite build 相同的约定,输出至 dist/ 目录。由于 Rolldown 被设计为与 Rollup API 兼容,现有的 Rollup 插件预期可以继续工作——但插件作者仍在修复边缘情况,因此在将 vp build 用于正式发布之前,请在分支上验证所有自定义插件。

若要在 monorepo 中跨次运行缓存构建输入:

vp run --cache build

Vite Task 会对声明的输入进行指纹识别,并在后续运行中跳过输入未发生变化的包。这与 Turborepo 所解决的工作流问题相同,区别在于它集成在工具链内部,而非作为外部工具叠加。

切换打包工具时,一个常见的生产故障模式是 source map 的静默回归。在部署 vp build 的输出之前,请验证错误监控或会话回放工具中的堆栈跟踪是否仍能正确解析到原始源文件——这是 OpenReplay 在真实用户会话数据中最常见的构建工具迁移问题之一。

vp 命令参考

命令用途底层工具
vp create脚手架新项目Vite+ 模板
vp dev启动开发服务器Vite 8
vp check代码检查、格式化、类型感知检查Oxlint、Oxfmt、tsgolint
vp fmt格式化文件Oxfmt
vp test运行测试Vitest
vp build生产构建包Vite 8 + Rolldown
vp run <script>运行 package.json 脚本(可选缓存)Vite Task
vp env按项目管理 Node.js 版本Vite+ 运行时管理器
vp migrate将现有 Vite 项目迁移至 Vite+
vp install通过项目的包管理器安装依赖npm/pnpm/yarn

参考信息截至 Vite+ v0.1.23(2026 年 5 月 29 日)。

将 Vite+ 接入 GitHub Actions

在 CI 环境中,VoidZero 发布了 voidzero-dev/setup-vp Action,用于安装 vp CLI 并可选地缓存依赖。一个最简工作流示例如下:

name: CI
on: [push, pull_request]
jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: voidzero-dev/setup-vp@v1
        with:
          node-version: '22'
          cache: true
      - run: vp install
      - run: vp check
      - run: vp test
      - run: vp build

这将独立的代码检查、格式化、类型检查和构建步骤替换为四个 vp 调用,它们与开发者本地使用的 vite.config.ts 读取同一份配置。

采用前须知

以下是针对当前版本的几点实事求是的说明:

  • Oxfmt 仍处于 1.0 之前的阶段。 在切换生产代码库之前,请在分支上将其输出与现有的 Prettier 基准进行对比。
  • 框架生态系统仍有其自身的约定。 虽然 Vite+ 可以为 Nuxt 和 TanStack Start 等框架搭建项目脚手架,但框架特定的配置和工作流可能仍需在 Vite+ 统一配置模型之外进行维护。
  • 1.0 之前意味着可能存在破坏性变更。 请在 CI 中锁定 vp 版本,并在升级前阅读 Vite+ 更新日志

下一步

本周在一个副项目上安装 Vite+,运行一次 vp check,感受一下当六个工具统一响应同一个命令时,您的工具链是什么体验。如果这种体验令您满意,可以尝试在一个非关键的 Vite 项目上运行 vp migrate,并在合并之前审查差异——迁移过程很快,但审查才是发现边缘情况的关键所在。

常见问题

Vite+ 以 MIT 许可证开源。VoidZero 最初讨论过双重许可模式,但 2026 年 3 月的 alpha 版本以 MIT 许可证发布,并一直沿用至 v0.1.23。您可以在个人项目、开源工作或商业代码库中免费使用 Vite+,无需支付许可费用。VoidZero 产品组合中的商业产品是 Void,一个独立的部署平台——Void 与 Vite+ 是两个不同的产品。

可以。在现有 Vite 项目中运行 vp migrate 即可将其转换为 Vite+ 配置;该命令会保留您现有的 vite.config.ts,并在当前 Vite 配置旁边添加 lint、fmt、test 和 staged 配置块。请在提交前审查差异,因为迁移会修改 package.json 脚本,并可能建议移除 ESLint、Prettier、Husky 和 lint-staged 等依赖,这些功能现在由 vp check 和 staged 配置块取代。

Vite+ 内置了 Vite Task,它通过 vp run --cache 对声明的输入进行指纹识别,并在后续运行中跳过未发生变化的包。Turborepo 和 Nx 提供了相同的输入感知缓存模式,但作为封装任意工具的独立任务运行器存在。Vite Task 的适用范围更窄,与 vp CLI 紧密耦合,因此当您的 monorepo 已经统一使用 Vite、Vitest 和 Rolldown 时,它最为适用,而非异构构建技术栈。

vp check 默认运行 Oxlint 和 Oxfmt,而非 ESLint 和 Prettier,两套工具栈的配置并不兼容。您可以在项目中保留 ESLint 和 Prettier,并通过 vp run lint 或 vp run format 脚本调用它们,但这样会失去共享 Oxc 解析器带来的性能优势。对于拥有大量自定义 ESLint 规则或 Prettier 插件的代码库,请在切换前在分支上验证 Oxlint 和 Oxfmt 的规则覆盖情况。

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay