一个帮助你将 uni-app 集成到原生微信小程序进行混合开发的 Vite 插件。
阅读 《uni-app 与原生小程序混合开发方案》 了解详细背景。
满足以下场景:
- 原有项目较为稳定,仅需要在其基础上新增某些复杂且相对独立的模块
- 全面重构成本高,收益低,需要一个渐进式的混合开发方案
本插件提供了一种优雅的解决方案:
- 将 uni-app 项目打包成小程序分包,集成到原生项目中
- 支持将功能同时分发到 APP、H5 等多个平台
- 可按需拆分多个分包,避免微信小程序 2M 分包限制
- 使用 rsync 高效同步,支持热重载,开发体验流畅
- 自动将 uni-app 分包实时同步到原生项目
- 支持文件内容重写,方便处理配置和依赖
- 支持多分包构建,灵活管理包体积
pnpm add vite-plugin-uni-subpackage-copy -D
推荐的项目结构如下:
.
├── miniprogram/ # 原生微信小程序项目目录
│ ├── app.js
│ ├── app.json
│ └── ...
└── uni-app-project/ # uni-app 项目目录
├── src/
├── vite.config.ts
└── ...
- 在 uni-app 项目的
vite.config.ts
中添加插件:
import uni from '@dcloudio/vite-plugin-uni'
import { defineConfig } from 'vite'
import uniSubpackageCopy from 'vite-plugin-uni-subpackage-copy'
export default defineConfig({
plugins: [
uni(),
process.env.UNI_PLATFORM === 'mp-weixin' && uniSubpackageCopy({
rootDir: '../miniprogram',
subpackageDir: process.env.UNI_SUBPACKAGE,
})
]
})
选项 | 类型 | 默认值 | 说明 |
---|---|---|---|
rootDir |
string |
'' |
原生微信小程序代码的根目录 |
subpackageDir |
string |
'' |
分包目录路径 |
rewrite |
Array<Write> |
[] |
文件内容重写配置 |
interface Write {
/** 文件路径 */
file: string
/** 重写文件内容的回调函数 */
write: (content: string, configPath: string) => string
}
下面是该插件的基础配置示例:
import uni from '@dcloudio/vite-plugin-uni'
import { defineConfig } from 'vite'
import uniSubpackageCopy from 'vite-plugin-uni-subpackage-copy'
export default defineConfig({
plugins: [
uni(),
process.env.UNI_PLATFORM === 'mp-weixin' && uniSubpackageCopy({
rootDir: '../miniprogram',
subpackageDir: process.env.UNI_SUBPACKAGE,
rewrite: [
{
file: 'app.json',
write: (content, configPath) => {
const appJson = JSON.parse(content)
// 修改文件内容
return JSON.stringify(appJson, null, 2)
},
},
],
}),
],
})
- 项目配置
在 uni-app 项目的 package.json
中配置分包构建命令:
{
"scripts": {
"dev": "run-p 'dev:**'",
"build": "run-p 'build:**'",
"dev:pkg-a": "uni -p pkg-a --subpackage=pkg-a",
"build:pkg-a": "uni build -p pkg-a --subpackage=pkg-a",
"dev:pkg-b": "uni -p pkg-b --subpackage=pkg-b",
"build:pkg-b": "uni build -p pkg-b --subpackage=pkg-b"
},
"uni-app": {
"scripts": {
"pkg-a": {
"title": "pkg-a",
"env": {
"UNI_PLATFORM": "mp-weixin"
},
"define": {
"MP-PKG-A": true
}
},
"pkg-b": {
"title": "pkg-b",
"env": {
"UNI_PLATFORM": "mp-weixin"
},
"define": {
"MP-PKG-B": true
}
}
}
}
}
- 分包配置
在 uni-app 项目的 pages.json
中使用条件编译配置分包页面:
{
"pages": [
// #ifdef MP-PKG-A
{
"path": "pages/index/index"
},
// #endif
// #ifdef MP-PKG-B
{
"path": "pages/detail/index"
}
// #endif
]
}
在原生小程序的 app.json
中配置分包:
{
"pages": [
"pages/index/index"
],
"subpackages": [
{
"root": "pkg-a",
"pages": [
"pages/index/index"
]
},
{
"root": "pkg-b",
"pages": [
"pages/detail/index"
]
}
]
}
- 插件配置
在 uni-app 项目的 vite.config.ts
中配置插件:
import uni from '@dcloudio/vite-plugin-uni'
import { defineConfig } from 'vite'
import uniSubpackageCopy from 'vite-plugin-uni-subpackage-copy'
export default defineConfig({
plugins: [
uni(),
process.env.UNI_PLATFORM === 'mp-weixin' && uniSubpackageCopy({
rootDir: '../miniprogram',
subpackageDir: process.env.UNI_SUBPACKAGE,
})
]
})
你可以参考 playground 目录下的示例项目来进行配置和开发。