weapp-vite

weapp-vite — 现代化小程序 Vite 构建工具#

资源概述#

weapp-vite 是一个将 Vite 开发体验引入原生微信小程序开发的构建工具。它让开发者在不使用跨端框架（如 Taro/uni-app）的前提下，依然能享受到现代前端工程化的便利。

核心能力：

• Vite 驱动：基于 Vite 的闪电般冷启动和 HMR 热更新
• ESM 原生支持：直接使用 import/export，无需 CommonJS 兼容处理
• TypeScript 零配置：开箱即用的 TypeScript 支持
• 原子化 CSS：集成 UnoCSS / TailwindCSS（通过 weapp-tailwindcss 插件）
• 自动导入：配合 unplugin-auto-import 实现组件/API 自动导入
• wevu 运行时集成：搭配 wevu 获得 Vue 3 Composition API 开发体验
• 原生小程序兼容：产出标准微信小程序，不改变运行时行为
• 插件系统：支持 Vite 插件生态扩展

与官方工具链的对比：

适用场景：

• 原生微信小程序项目工程化升级
• 希望使用 Vite 生态但不想迁移到跨端框架
• 需要 UnoCSS/TailwindCSS 的原子化 CSS 方案
• 追求更快开发体验（HMR）的团队

设计规范#

技术架构#

weapp-vite 构建流程：
┌──────────────┐    ┌──────────────┐    ┌──────────────┐
│  源码 (WXML)  │ →  │  Vite 编译    │ →  │  标准小程序   │
│  (TS/ESM)    │    │  (HMR/插件)  │    │  (微信运行)   │
│  (UnoCSS)    │    │              │    │              │
└──────────────┘    └──────────────┘    └──────────────┘

配套生态#

版本发布频率#

weapp-vite 是极度活跃的开源项目：

• npm 版本数：351 个版本
• 发布频率：几乎每周 2-3 个版本
• 最后更新：2026-08-13（当日有更新）

审核规范#

兼容性#

• 产出标准小程序：编译后产出的是完全标准的微信小程序，可正常通过审核
• 无运行时开销：构建工具仅在开发时工作，不增加运行时包体积
• 开发者工具兼容：构建后用微信开发者工具打开 dist 目录即可预览/上传

注意事项#

• weapp-vite 仅支持原生微信小程序，不支持 Taro/uni-app 项目
• 部分微信开发者工具的功能（如云开发面板）需要在 dist 目录中使用
• 升级时注意 weapp-vite 与 wevu 版本的对应关系

开发指南#

快速上手#

1. 新项目创建

npm create weapp-vite@latest my-miniprogram
cd my-miniprogram
npm install

2. 已有项目迁移

npm install -D weapp-vite wevu

创建 weapp-vite.config.ts：

import { defineConfig } from 'weapp-vite';
import wevu from 'weapp-vite-plugin-wevu';
import UnoCSS from 'unocss/vite';

export default defineConfig({
  plugins: [
    wevu(),
    UnoCSS(),
  ],
});

3. 开发命令

{
  "scripts": {
    "dev": "weapp-vite dev",
    "build": "weapp-vite build"
  }
}

4. 使用 wevu + TypeScript

// pages/index.ts
import { definePage } from 'wevu';
import { ref, computed } from '@vue/reactivity';

definePage({
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);

    const increment = () => count.value++;

    return {
      count,
      double,
      increment
    };
  }
});

使用 UnoCSS#

npm install -D unocss @unocss/preset-weapp

// weapp-vite.config.ts
import UnoCSS from 'unocss/vite';
import presetWeapp from '@unocss/preset-weapp';

export default defineConfig({
  plugins: [
    UnoCSS({
      presets: [presetWeapp()],
    }),
  ],
});

常见陷阱#

1. 不要与 Taro/uni-app 混用：weapp-vite 面向原生小程序开发
2. wevu 版本对应：wevu 是 weapp-vite 的配套运行时，版本需要匹配
3. 开发者工具设置：需要在开发者工具中关闭 ES6 转 ES5 选项（weapp-vite 已处理）
4. 小程序npm构建：使用 weapp-vite 后不需要在开发者工具中点击「构建 npm」
5. 全局类型：TypeScript 全局类型（如 wx 对象）需要安装 miniprogram-api-typings

生态资源#

weapp-vite 生态版图#

                    weapp-vite（构建工具）
                         |
         ┌───────────────┼───────────────┐
         |               |               |
       wevu          UnoCSS        weapp-tailwindcss
    (Vue3 运行时)   (原子化CSS)      (TailwindCSS)
         |
    @vue/reactivity
    (响应式系统)

推荐工具链组合#

纯原生 + Vite：

• weapp-vite + TypeScript + miniprogram-api-typings

Vue 风格开发：

• weapp-vite + wevu + @vue/reactivity

原子化 CSS 开发：

• weapp-vite + UnoCSS + @unocss/preset-weapp
• 或 weapp-vite + weapp-tailwindcss

全栈工程化：

• weapp-vite + wevu + UnoCSS + unplugin-auto-import + ESLint + Prettier

版本更新#

v6.20.1（2026-08-13，latest）#

• 性能优化和 bug 修复
• 与 Vite 最新版本同步

v6.x 系列（2026）#

• wevu 深度集成
• UnoCSS / TailwindCSS 支持完善
• TypeScript 类型系统增强
• HMR 精确更新优化

历史里程碑#

• v1.x：初始版本，基本 Vite 构建
• v3.x：wevu 集成
• v5.x：插件系统完善
• v6.x：稳定性提升，生态完善