RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案

将 RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案，可以实现一套代码管理后台系统（PC）和移动端应用（H5/小程序/App）。以下是整合思路和关键步骤：

---

技术栈分工

1. RuoYi：后端框架（Spring Boot + MyBatis）

2. Vue CLI：PC 管理后台前端（基于 Vue 2 + Element UI）

3. uni-app：移动端应用（一套代码编译到 H5/小程序/App）

---

整体架构

关键实现步骤

1. 后端统一 API 服务

• 使用 RuoYi 提供 RESTful API

• 配置跨域支持（PC 和移动端共享 API）

2. PC 管理后台（Vue CLI）

• 基于 RuoYi-Vue 项目（GitHub）

• 技术栈：Vue 2 + Vuex + Vue Router + Element UI

3. PC 前端（Vue CLI）

• 基于 RuoYi-Vue 项目（GitHub）

• 技术栈：Vue 2 + Vuex + Vue Router + Element UI+Bootstrap

4. 移动端（uni-app）

• 安卓：

• 苹果：

• 小程序：

  

---

多端适配技巧

1. 条件编译：

   // #ifdef H5
   console.log('仅在H5生效')
   // #endif
   
   // #ifdef MP-WEIXIN
   console.log('仅在微信小程序生效')
   // #endif

2. UI 组件库选择：

   • PC：Element UI（Vue CLI）

   • 移动端：uni-app 官方组件 或 uView UI

3. 路由管理：

   • PC：Vue Router（支持嵌套路由）

   • uni-app：内置路由（pages.json 配置）

---

部署方案

1. 后端：

   • RuoYi 打包为 JAR 部署到服务器

   • Nginx 配置：

     server {
       listen 80;
       server_name api.yourdomain.com;
       location / {
         proxy_pass http://localhost:8080;
       }
     }

2. PC 前端：

   npm run build
   # 部署 dist 目录到 Nginx

3. uni-app 多端发布：

   • H5：npm run build:h5

   • 微信小程序：npm run dev:mp-weixin (用微信开发者工具打开)

   • App：通过 HBuilderX 云打包

---

常见问题解决

1. 跨域问题：

   • 开发环境：配置 vue.config.js 代理

     devServer: {
       proxy: {
         '/api': {
           target: 'http://localhost:8080',
           changeOrigin: true
         }
       }
     }

   • 生产环境：Nginx 反向代理

2. 样式冲突：

   • PC 和移动端使用独立项目

   • 全局样式通过 @import 引入时添加 scoped

3. 权限同步：

   • 共用 RuoYi 的 RBAC 权限体系

   • 前端路由权限通过接口动态生

通过以上方案，可构建企业级应用：

• PC 端：复杂数据管理（Element UI 表格/表单）

• 移动端：轻量级操作（uni-app 跨端能力）

• 后端：统一数据源和权限控制（RuoYi 成熟架构）