特性

• Vue 3.5 + Vite 7 + TypeScript 5.9 — 最新技术栈
• 多 UI 组件库 — 同时支持 Vant、NutUI、Varlet，按需自动引入
• Pinia 状态管理 — 配合 pinia-plugin-persistedstate 实现持久化
• viewport（vw）适配 — 基于 cnjm-postcss-px-to-viewport，自动处理 UI 库 375/750 设计稿差异
• Axios + useFetch 双请求方案 — 支持传统 Axios 和 @vueuse/core 的 createFetch
• vue-i18n 多语言 — 按需懒加载语言包
• 文件路由 — 基于 vite-plugin-pages 自动生成路由
• 丰富的 Vite 插件 — Mock、Eruda 调试、PWA、QRCode、图片压缩、gzip 压缩、打包分析等
• 代码规范 — ESLint flat config + Prettier + Stylelint + Husky + lint-staged
• Docker 部署 — 内置 Dockerfile + Nginx 配置

环境要求

| 工具 | 版本 | | ------- | ---------- | | Node.js | >= 20.10.0 | | pnpm | >= 9.12.0 |

快速开始

# 拉取项目
git clone https://github.com/sunniejs/vue-h5-template.git
进入项目目录
cd vue-h5-template
安装依赖
pnpm install
启动项目
pnpm dev
打包
pnpm build
预览打包结果
pnpm preview

项目结构

├── build/                  # Vite 构建相关配置
│   ├── vite/plugins/       # Vite 插件配置（auto-import、component、mock、eruda 等）
│   └── utils.ts            # 构建工具函数
├── mock/                   # Mock 数据
├── public/                 # 静态资源
├── src/
│   ├── api/                # 接口管理
│   ├── assets/             # 项目资源（字体、图片等）
│   ├── layout/             # 布局组件
│   ├── locales/            # 国际化语言包
│   ├── router/             # 路由配置
│   ├── store/              # Pinia 状态管理
│   ├── styles/             # 全局样式 & SCSS 变量
│   ├── utils/              # 工具函数（Axios 封装、useFetch 封装）
│   ├── views/              # 页面组件
│   ├── App.vue             # 根组件
│   └── main.ts             # 入口文件
├── types/                  # TypeScript 类型声明
├── .env.*                  # 多环境变量配置
├── vite.config.mts         # Vite 配置
├── postcss.config.js       # PostCSS 配置（viewport 适配）
├── Dockerfile              # Docker 部署配置
└── nginx.conf              # Nginx 配置

集成的 Vite 插件

| 插件 | 说明 | | ------------------------------- | -------------------- | | unplugin-auto-import | 按需自动引入 API | | unplugin-vue-components | 按需自动引入组件 | | vite-plugin-pages | 文件系统路由 | | vite-plugin-mock | 本地 Mock 数据 | | @zhaojjiang/vite-plugin-eruda | 移动端调试工具 | | vite-plugin-svg-icons | SVG 图标 | | vite-plugin-compression | Gzip 压缩 | | vite-plugin-imagemin | 图片压缩 | | vite-plugin-pwa | PWA 支持 | | vite-plugin-qrcode | 开发时二维码 | | vite-plugin-restart | 配置文件修改自动重启 | | vite-plugin-progress | 构建进度条 | | @vitejs/plugin-basic-ssl | 本地 HTTPS | | rollup-plugin-visualizer | 打包分析 |

其他版本

• vue-h5-template-lite（纯 JS 版）— 点击查看
• vue2-h5-template（Vue 2 版）— 点击查看
• monorepo 版（Monorepo 架构）— 点击查看

文档

详细的使用文档请查看 在线文档

如果对你有帮助，欢迎 Star 支持 ⭐

关于我

扫描添加下方的微信并备注加交流群，交流学习，及时获取代码最新动态。

如果你觉得该项目有给你带来帮助，可以请作者喝一杯 ☕ 支持持续的迭代

WechatPay	AliPay

Star History

License

MIT