跳到主要内容
weapp.js.org
返回工具栈
稳定
Taro / React 迁移
WeChatAlipayWebReactTaroVite

VPT

给 Taro 接上 Vite

在 Taro 项目里用 Vite 做开发与构建,而不是老的 webpack 链路。它负责把现有 React 工程接入工具链。

维护者:sep2 and contributors

相邻工具和运行时能力可以按需组合,不要求一次性迁移整个项目。

VPT 的 React 源码与微信开发者工具中的应用,计数器值为 5
官方热更新演示:编辑前,微信小程序中的计数器已增加到 5。

安装

适合希望复用 React 与 Taro 组件和 API,并使用现代 Vite 工具链开发微信、支付宝小程序与 Web 应用的前端团队。

npm install -D vite-plugin-taro

真实运行结果

以下截图来自项目官方仓库中的 demo 或回归基线,并在本站本地化保存。

VPT 的 React 源码与微信开发者工具中的应用,计数器值为 5
官方热更新演示:编辑前,微信小程序中的计数器已增加到 5。
VPT 热更新后标题变为 Hello,计数器仍为 5
同一段演示的更新后画面(裁剪):标题已变为 Hello,计数器仍为 5。

工程证据

Taro + Vite 迁移

从一段真实的配置、命令或边界说明开始判断项目是否适合你的工程。

package.json稳定
npm create vite-taro@latest my-app

# keep React + Taro APIs
# move the build pipeline to Vite

核心能力

  • Vite 8 + React 19 + Taro 4
  • 保留状态的热更新
  • 微信小程序全自动分包
  • Tailwind CSS v4 开箱即用
  • 微信 Skyline 渲染模式

常见用法

  1. 01使用 npm create vite-taro@latest my-app 创建跨端 React 项目
  2. 02在微信开发者工具中编辑 React 组件并保留页面、组件和输入状态
  3. 03通过标准静态与动态导入自动规划微信小程序分包

支持平台

WeChatAlipayWeb
当前版本
v0.7.1
2026年9月7日
周下载
934
GitHub Stars
50

常见问题

VPT 与 Taro 是什么关系?

VPT 是 vite-plugin-taro 的简称,使用 Taro 组件、API 和运行时,通过 Vite 驱动开发与构建,而不是沿用旧式 webpack 链路。

VPT 支持哪些平台?

当前支持微信小程序、支付宝小程序与 Web(H5),分别使用 wx、zfb 和 h5 构建目标。

如何开始使用 VPT?

新项目推荐运行 npm create vite-taro@latest my-app。已有 Taro 项目请阅读官方迁移指南;安装插件后仍需按文档配置 Vite 和项目入口。

未来文档路径

/docs/vite-plugin-taro/

聚合文档上线后,此路径将成为 canonical 地址。

统计偏好

百度统计和 Google Analytics 在正式站点默认启用,用于了解访问与有限交互。你可以随时关闭。