Vue 2 移动端实现概览
Vue 2 移动端位于 Vue 2 项目的 ruoyi-fastapi-app，使用 uni-app Vue 2、Vue CLI、Webpack、Vuex 和 Options API。它仍调用共用 FastAPI 后端，也与 Vue 3 移动端保持相近的页面、API 和登录协议，但入口、状态和构建扩展必须按 Vue 2 方式维护。
实现地图
| 要解决的问题 | 主要入口 | 继续阅读 |
|---|---|---|
| 怎样启动 H5、小程序和 App Plus | package.json.scripts、manifest.json | 本地运行与平台命令 |
| 根实例怎样安装公共能力 | src/main.ts、src/App.vue、src/plugins | 应用装配与 Vuex |
| 用户状态怎样通过 Vuex 使用 | src/store/modules/user.js、src/store/getters.js | 应用装配与 Vuex |
| Options API 页面怎样接入生命周期 | 页面 export default、uni 生命周期选项 | 开发一个移动端页面 |
| Vue CLI 怎样编译不同平台 | vue.config.js、babel.config.js、platform.js | Vue CLI、Tailwind 与多端构建 |
| Tailwind 和加密依赖怎样适配小程序 | Tailwind / PostCSS 配置、src/vendor/node-forge | Vue CLI、Tailwind 与多端构建 |
| 登录、Token 和加密怎样工作 | utils/request.js、utils/auth.js | 请求、认证与传输加密 |
| 页面怎样注册和跳转 | pages.json、permission.js | 页面与登录拦截 |
运行时链路
src/main.ts安装项目插件和 Vuex，将 Store、getDicts等能力放到 Vue 原型。- 设置
App.mpType = 'app'，创建根new Vue({ ...App })实例并挂载。 src/permission.js在入口加载时注册四种 uni 页面跳转拦截器。App.vue的onLaunch把src/config.js写入globalData.config；H5 没有 Token 时重启页面栈到登录页。- 页面通过根 getters、Vuex action、原型插件与
src/api完成业务交互。 - Vue CLI 根据
UNI_PLATFORM选择 H5、app-plus或小程序构建链，再由 Webpack、Babel、PostCSS 与 Tailwind 完成平台转换。
移动端页面仍由 pages.json 静态注册，不使用 Vue Router，也没有 Web 管理端的后端动态菜单。
公共机制与版本实现
| 公共机制 | Vue 2 页面需要知道的实现入口 |
|---|---|
| 页面静态注册 | 页面文件创建后修改 src/pages.json |
| 登录保护 | $tab 或 uni 跳转 API，由 permission.js 统一拦截 |
| Token 与用户快照 | Token 在 App-Token，用户字段由 Vuex User Module 写入 storage_data |
| 普通请求 | 页面调用 src/api，公共请求层处理 Token、加密和业务错误 |
| 上传 | 走独立 upload.js 和 uni.uploadFile |
| 功能权限 | 页面通过 $auth 使用根 getters 中的角色权限，后端继续执行授权 |
| 字典 | 页面通过 this.getDicts(type) 显式请求，没有 Vue 3 的 Dict Store 缓存接口 |
修改时先判断归属
- 改后端 URL 与应用展示信息：修改
src/config.js。 - 改 AppID、版本、平台权限和 H5 路由：修改
src/manifest.json。 - 改页面、标题与 TabBar：修改
src/pages.json。 - 改登录用户状态：修改 Vuex User Module，并同步根 getters 与退出清理。
- 改小程序类名、Babel 或依赖替换：修改 Vue CLI、Webpack、Tailwind、PostCSS 或
platform.js。 - 改 node-forge vendor：从当前依赖版本重新核对差异，并对所有四个被替换模块做一致性验证。