一介布衣

🧭 快速导航

mpvue 生态与迁移思路 ​

仓库：https://github.com/Meituan-Dianping/mpvue（已归档）
关联清单：https://github.com/justjavac/awesome-wechat-weapp

mpvue 是基于 Vue 的小程序前端框架，早期以“用 Vue 写小程序”为卖点，现已停止维护。对新项目不再推荐；本文聚焦存量项目的维护与迁移。

🎯 目标 ​

  • 了解 mpvue 的工程特性与限制
  • 稳定维护存量 mpvue 项目
  • 制定迁移至 Taro/uni-app 的路线

🧭 框架特点与限制 ​

  • 使用 Vue 语法编写，编译为小程序代码
  • 生命周期、事件命名与原生/新框架存在差异
  • 生态停更，依赖与工具链较老，和现代 npm 库兼容性差

🧱 目录与页面示例 ​

典型目录（示例）：

mpvue-app/
├─ src/
│  ├─ main.js
│  ├─ app.json
│  ├─ pages/
│  │  └─ index/
│  │     ├─ index.vue
│  │     └─ main.js
│  └─ utils/
└─ dist/           # 构建输出

页面示例（src/pages/index/index.vue）：

vue
<template>
  <div class="page">
    <p>计数：\{\{ count \}\}</p>
    <button @click="inc">+1</button>
  </div>
</template>

<script>
export default {
  data () { return { count: 0 } },
  methods: { inc () { this.count++ } },
  onLoad () { console.log('mpvue page onLoad') }
}
</script>

<style scoped>
.page { padding: 24rpx; }
</style>

🏗️ 存量项目维护建议 ​

  • 锁定 Node/npm 与依赖版本，避免“升级即崩”的连锁反应
  • 抽离通用层：请求、缓存、埋点、鉴权统一封装，降低对 mpvue 的耦合
  • 兼容测试：iOS/Android 双真机、不同基础库版本做回归
  • 安全与合规：清理老旧第三方库、修补高危漏洞（可通过后端代理等手段缓解）

🔁 迁移路线（至 Taro/uni-app） ​

  1. 先迁“横向可复用”的服务层（http、storage、logger）
  2. 新框架建立路由/页面骨架，串通关键链路（登录/下单/支付）
  3. 组件与样式分阶段替换，引入一致的 UI 组件库（TDesign/Vant Weapp 等）
  4. 双线运行对比关键指标（错误率、耗时、包体），完成流量切换

迁移对照（示意）：

  • 路由与页面声明：mpvue 自有规范 → Taro 的 app.config.ts / uni-app 的 pages.json
  • 生命周期：mpvue 钩子 → 目标框架对应钩子（onLoad/onShow 等）
  • 组件：自定义组件迁移为目标框架组件体系，或替换为生态库组件
  • API：wx.* 能力可直接迁移；封装后可统一跨端

⚠️ 避坑清单 ​

  • 第三方包依赖 DOM：小程序端不可用，需替换或条件编译
  • 编译产物路径/alias：调整构建配置，避免路径不一致
  • 表单/样式差异：统一使用 rpx，梳理表单控件行为差异

🧪 常见问题 ​

  • 构建失败/依赖冲突：回退到已验证版本；必要时锁死 lockfile
  • 兼容性 Bug：通过 E2E 回归与埋点定位高发页面/机型
  • 性能：老框架渲染/事件开销较大，优先迁移高频页面

✅ 适用场景 ​

  • 历史项目存量维护
  • 有节奏地向主流生态迁移

🔗 参考 ​

📊 总结 ​

mpvue 已归档，不具备长期演进能力。建议尽快制定迁移计划：抽离通用层、分阶段替换视图与组件，利用新框架生态降低后续迭代成本与风险。