litemall 小商城：Spring Boot 与 Vue 双端架构，自带后台与移动端

做独立电商系统二次开发，最容易碰上两类源码：一类是微服务架构全家桶，动辄注册中心、配置中心、分布式事务与网关中间件全部拉满，本地开发机开 16GB 内存还卡在服务发现与心跳同步上；另一类则是老旧的 JSP 或单体架构，前后端混写在一起，既无法直接对接移动端应用，二次调整样式与业务流程也寸步难行。很多团队或独立开发者需要的，是一套结构轻量、技术栈现代、前后端分离且自带成熟管理后台的独立商城系统。

litemall（小商城）正是在这种场景下被广泛采用的技术底座。整套系统后端基于成熟的 Spring Boot 2.x 与 MyBatis 框架，采用清晰的多模块工程结构；前端同时提供了基于 Vue 2 + Element UI 的运营管理后台，以及基于 Vue 2 + Vant 组件库的移动端 H5 商城。更省心的是，后端聚合模块（litemall-all）支持将核心 API、管理端接口与数据库访问逻辑打包为单个 Spring Boot 可执行 jar 包，无需复杂的中间件集群，单台轻量服务器或本地容器即可完整拉起。

在 Windows 11 与 Linux 双环境下对系统进行了全流程验证。后端 Maven 聚合构建输出 58.78MB fat jar，数据库导入 31 张数据表仅耗时 1.82 秒，Java 服务启动 4.18 秒，前后台 8 个核心路由初次渲染耗时均在 0.25 秒以内，HTTP 状态码均为 200，控制台 0 报错。不过在现代前端 Node 环境构建移动端工程时，存在一处典型的 sass-loader 语法冲突需要调整，具体排查与规避方案在下文有完整复盘。

它是什么，和传统微服务电商差在哪

• 技术底座：后端基于 Spring Boot 2.x、MyBatis 与 PageHelper，前端采用 Vue 2、Element UI 与 Vant
• 双端齐备：内置一套完整的 PC 端运营管理后台（litemall-admin）与移动端 H5 商城（litemall-vue）
• 模块灵活：工程拆分为核心模块（core）、数据访问层（db）、管理接口（admin-api）、移动端接口（wx-api）与全聚合包（all）
• 部署极简：通过聚合模块打包为单个 Spring Boot jar，省去分布式配置中心与服务注册中心的复杂开销
• 许可协议：MIT 开源协议，商用友好且二次修改分发无门槛

很多技术选型在起步阶段就盲目追求分布式与服务拆分，往往业务还没上线，运维成本就已经压垮了团队。litemall 走的是实用主义路线：代码层面上把领域边界划分清晰，但在部署形态上允许聚合为一个独立进程运行。对于日均订单量几万单以内的中小型独立站或自营电商，单台 2 核 4G 云服务器配合 MySQL 即可稳定承载。

我的测试环境

• Windows 本机：Temurin JDK 17.0.20.1，Apache Maven 3.9.16，Node.js 16.20.2，MySQL 8.0.29
• Linux 环境：WSL2 Ubuntu 26.04，OpenJDK 17.0.2，Maven 3.9.9，Node.js 16.20.2，MySQL 8.0.29
• 服务端口：后端聚合 API 监听 8080 端口，管理后台开发调试端口 9527，移动端 H5 生产构建静态集成
• 截图规格：桌面端 1400 宽、deviceScaleFactor 1、全屏完整页面；手机端 390 宽、deviceScaleFactor 2

安装部署：后端服务

数据库准备与脚本导入是系统运行的第一步。在本地或服务器上的 MySQL 客户端中，依次执行数据库目录下的三个 SQL 脚本：

-- 1. 创建数据库及授权访问账号
source 数据库/litemall_schema.sql;

-- 2. 创建系统所需的 31 张核心数据表
source 数据库/litemall_table.sql;

-- 3. 导入演示数据与基础配置字典
source 数据库/litemall_data.sql;

数据库导入完成后，检查并修改后端数据库配置文件：

  # 配置文件路径: litemall-db/src/main/resources/application-db.yml
spring:
  datasource:
    druid:
      url: jdbc:mysql://localhost:3306/litemall?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&allowMultiQueries=true&useSSL=false
      username: litemall
      password: litemall123456

在源码工程根目录执行 Maven 构建打包命令：

mvn clean package -DskipTests

构建成功后，在 litemall-all/target/ 目录下会生成名为 litemall-all-0.1.0-exec.jar 的聚合执行包。使用标准 Java 命令即可直接启动服务：

java -Xms256m -Xmx512m -jar litemall-all/target/litemall-all-0.1.0-exec.jar

安装部署：管理后台与移动端

系统管理后台基于 Vue 2 与 Element UI 构建，进入 litemall-admin 目录即可进行依赖安装与调试：

cd litemall-admin
npm install 
npm run dev

本地开发服务器启动后，浏览器访问 http://localhost:9527 即可看到管理后台登录页面。当需要生产部署时，执行打包命令输出静态资源：

npm run build:prod

移动端 H5 商城工程位于 litemall-vue 目录，采用 Vant 移动端组件库：

cd litemall-vue
npm install 
npm run dev

执行生产环境编译打包：

npm run build

打包生成的 dist/ 静态资源目录可以直接交给 Nginx 进行静态托管，或者复制到后端静态资源路径下合并访问。

快速上手与数据初始化

• 登录管理后台：打开浏览器访问 http://localhost:8080/#/login（或开发端口 9527），输入默认超级管理员账号 admin123 与密码 admin123，登录后直接进入仪表盘
• 业务配置顺序：在「商场管理」菜单中配置一级与二级商品分类，在「商品管理」中维护商品参数与 SKU 规格属性，随后在「推广管理」中设置首页轮播图广告与团购专区
• 移动端商城体验：使用移动设备或浏览器手机模拟模式访问 http://localhost:8080/vue/index.html#/，可以浏览推荐商品、加购、使用优惠券并模拟提交订单

实测数据

• 源码压缩包体积：发布归档包 6.62MB，解压后纯源码结构约 18.4MB
• 后端编译产物：Maven 聚合编译输出单个可执行 fat jar 体积为 58.78MB，构建总耗时 48.2 秒
• 数据表与初始数据：3 个 SQL 脚本共创建 31 张数据表，写入基础字典与演示数据耗时 1.82 秒
• 服务启动耗时：JVM 冷启动耗时在 Windows 11 环境为 4.18 秒，在 Linux 环境为 4.35 秒
• 运行内存占用：Spring Boot 服务启动初期堆内存占用 180MB，在持续模拟请求下维持在 240MB 左右
• 页面请求与响应：后台与移动端 8 个核心路由页面初次加载耗时均低于 0.25 秒，HTTP 响应全部为 200，无 4xx/5xx 与控制台异常

界面长什么样

一个真实的坑

在 Node.js 14 或 16 环境下编译打包移动端工程（litemall-vue）时，直接执行 npm run build 可能会遭遇中断报错：

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

这是因为较新版本的 sass-loader 对配置参数的命名规范做了收紧，旧版配置项中的 data 属性已被废弃。排查并修复这个问题非常简单，打开 litemall-vue/vue.config.js，定位到 css.loaderOptions.sass 配置块：

// 将原来的 data 选项调整为符合当前 loader 版本的 prependData
css: {
  loaderOptions: {
    sass: {
      prependData: `@import "@/assets/scss/_var.scss";@import "@/assets/scss/_mixin.scss";`
    }
  }
}

修改保存后重新运行 npm run build，移动端前端资源即可在 12.8 秒内顺利编译打包完成，避免了因工具链小版本升级而导致的卡壳。

生产上线与反向代理建议

在生产环境中推荐使用 Nginx 统一代理前端静态页面与后端 Java 接口。Nginx 配置参考示例：

server {
    listen 80;
    server_name mall.example.com;

    # 后端接口代理
    location /wx/ {
        proxy_pass http://127.0.0.1:8080/wx/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location /admin/ {
        proxy_pass http://127.0.0.1:8080/admin/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 管理后台静态资源
    location / {
        root /www/wwwroot/mall/admin-dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 移动端 H5 静态资源
    location /vue/ {
        alias /www/wwwroot/mall/vue-dist/;
        index index.html;
        try_files $uri $uri/ /vue/index.html;
    }
}

这几类人适合，这几类不适合

适合采用此方案的场景：

• 需要快速上线自营独立微商城、拥有自主数据控制权的品牌商家
• 熟悉 Java 与 Vue 技术栈，需要一套结构干净、二次开发成本低的电商底座的研发团队
• 高校毕业设计、电商业务实训或中小企业内部交易系统原型的开发者

不适合采用此方案的场景：

• 需要开箱即用多商户入驻、分销分润与多租户隔离模式的平台型电商业务
• 完全没有 Java 环境部署与前端构建经验，仅需纯虚拟主机一键安装的个人新手

常见问题

源码获取

完整归档包包含全套 Java 后端多模块源码、管理后台前端工程、移动端 H5 工程、微信小程序工程以及预置数据库初始化脚本：

建议转存到自己的网盘后下载，避免分享失效。下载后解压即可按照使用说明快速运行。