MBTI 小程序 → Vue 3 H5(迁移工程)
启动
cd h5-vue
npm install
npm run dev
浏览器打开终端提示的地址(默认 http://localhost:5174)。
配置接口地址:复制 .env.development 为 .env.local,设置:
VITE_API_BASE=https://你的API域名
若本地后端与 Vite 同源代理,可在 vite.config.ts 里配置 server.proxy,并令 VITE_API_BASE 为空,请求走相对路径 /api。
迁移进度说明
| 维度 | 说明 |
|---|---|
| 路由 | app.json 中 37 条页面路径已全部注册 |
| Tab 三页 | 首页 / 拍摄 / 我的:布局与小程序主区块对齐(含底部自定义 Tab) |
| 占位页 | 其余 34 条为占位页(标题 + 路由名 + 回首页),便于按页迁移 |
| 基建 | Vue Router、Pinia、/api/config/runtime 拉取、axios 封装 |
完成度百分比(客观口径)
- 路由覆盖率:37 / 37 = 100%(每条路径均可访问)
- 界面 + 主要交互按小程序复刻:约 3 / 37 ≈ 8%(仅 Tab 内三页;其中拍摄页为能力说明型占位)
- 若计入基建(工程可运行 + Tab 壳 + Runtime):约 15%~18%(主观加权,供排期参考)
要做到「每个页面 1:1 功能与界面」,需按模块继续把
.wxml/.wxss/.js迁到.vue,并替换wx.*(支付、登录、相机、分享等)。
静态资源
首页头图已尝试从 ../miniprogram/images/mbti-team-image.png 复制到 public/images/;若缺失可手动拷贝同名文件。