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

发布于：2025-07-05 ⋅ 阅读:(13) ⋅ 点赞:(0)

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

技术栈分工

RuoYi：后端框架（Spring Boot + MyBatis）
Vue CLI：PC 管理后台前端（基于 Vue 2 + Element UI）
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）

安卓：
苹果：
小程序：

多端适配技巧

条件编译：

// #ifdef H5
console.log('仅在H5生效')
// #endif

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

UI 组件库选择：
- PC：Element UI（Vue CLI）
- 移动端：uni-app 官方组件或 uView UI
路由管理：
- PC：Vue Router（支持嵌套路由）
- uni-app：内置路由（pages.json 配置）

部署方案

后端：

RuoYi 打包为 JAR 部署到服务器

Nginx 配置：

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

PC 前端：

npm run build
# 部署 dist 目录到 Nginx

uni-app 多端发布：
- H5：npm run build:h5
- 微信小程序：npm run dev:mp-weixin (用微信开发者工具打开)
- App：通过 HBuilderX 云打包

常见问题解决

跨域问题：

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

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

生产环境：Nginx 反向代理

样式冲突：
- PC 和移动端使用独立项目
- 全局样式通过 @import 引入时添加 scoped
权限同步：
- 共用 RuoYi 的 RBAC 权限体系
- 前端路由权限通过接口动态生

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

PC 端：复杂数据管理（Element UI 表格/表单）
移动端：轻量级操作（uni-app 跨端能力）
后端：统一数据源和权限控制（RuoYi 成熟架构）