# wujies-web

**Repository Path**: wujies/wujies-web

## Basic Information

- **Project Name**: wujies-web
- **Description**: 无界平台web端,面向C端用户
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-30
- **Last Updated**: 2026-10-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <img src="docs/images/brand-logo.png" alt="Wujies 无界平台" width="720" />
</p>

# Wujies Shop —— 无界平台 C 端（用户端）

**wujies-shop** · 面向终端用户的 Web 前端 · 商城 / 会员 / 社交

[![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
[![Vue](https://img.shields.io/badge/Vue-3-42b883.svg)]()
[![TypeScript](https://img.shields.io/badge/TypeScript-5-3178c6.svg)]()
[![Vite](https://img.shields.io/badge/Vite-latest-646cff.svg)]()

配套后端：[`wujies-platform`](https://gitee.com/impressivel/wujies-platform) · 插件仓库：[`wujies-plugins`](https://gitee.com/impressivel/wujies-plugins)

---

## 平台简介

Wujies 无界平台是一套 Spring Boot 3 + Vue 3 的**多租户管理平台**，核心特点是
**业务能力以「应用」为单位在运行期安装、升级、卸载，不需要重新构建或重启**。

**wujies-shop** 是这个平台的 **C 端（用户端）Web 前端** —— 面向终端用户的
商城、会员、社交等页面，与 [`wujies-admin`](https://gitee.com/impressivel/wujies-admin)
（管理端）是**平行的两个 Vite 工程**，各自独立构建、独立部署，共用同一套后端接口与登录体系。

### 技术栈

Vue 3 · TypeScript · Element Plus · Vite · Pinia · Axios

---

## 仓库一览

| 仓库 | 内容 |
|---|---|
| [`wujies-platform`](https://gitee.com/impressivel/wujies-platform) | 后端 + 应用市场 + 各应用的契约 |
| [`wujies-plugins`](https://gitee.com/impressivel/wujies-plugins) | 全部业务应用（插件）本体 + 本地开发沙箱 |
| [`wujies-admin`](https://gitee.com/impressivel/wujies-admin) | 管理端前端 + 远程应用前端工程 |
| **wujies-shop**（本仓库） | C 端（用户端）Web 前端 |
| [`wujies-mobile`](https://gitee.com/impressivel/wujies-mobile) | 移动端（uni-app） |

---

## ⚠️ 接口路径：取决于"应用装没装"

这是使用本仓库时**最容易踩的坑**，务必先看这一节。

平台在设计上把 C 端接口**全部交给了应用（插件）**，宿主自身不持有任何 C 端控制器 ——
所以 `/open/**` 与 `/portal/**` 这些路径**不是平台自带的**，而是由对应的应用提供的。

**这意味着**：

- 后端必须**先安装对应应用**（商城、会员、社交…），否则这些接口会 **404**；
- 这是**刻意的架构调整**：宿主只服务管理端，C 端能力随应用走 ——
  这样加一个 C 端业务就是装一个应用，而不是改宿主、重新发版；
- 如果某个 C 端接口 404，**先确认对应应用装了没有**，再去查路径本身。

> 排查顺序：① 应用是否已安装并启用 → ② 应用版本是否包含该接口 → ③ 最后才查路径拼写。

### 前端远程加载下的额外约束

在 C 端页面里如果引用了应用提供的远程视图，同样要注意
[`wujies-admin`](https://gitee.com/impressivel/wujies-admin) README 里
「重要约定」那 5 条（产物目录名 = appCode、入口 URL 带版本号、
AutoImport 清单一致、垫片文件名是硬契约、别写薄垫片绕 SDK）——
那些约束源于**前端远程加载机制**，与是管理端还是 C 端无关。

---

## 快速开始

### 环境要求

Node.js 18+

### 开发

```powershell
npm install
npm run dev
```

后端地址配在 `.env.development` 的 `VITE_APP_BASE_API`。

### 生产构建

```powershell
npm run build:prod
```

一次构建产出**多个站点入口**（见下一节），产物里同时有：

```
dist/index.html                  ← 系统/后台入口
dist/sites/mall/index.html       ← 商城入口
dist/assets/**                   ← 两个入口共用的 JS/CSS
dist/app-loader.css              ← 两个入口共用的首屏 loader 样式
```

## 多站点入口：同域名 + 路径前缀

一个仓库、一次构建、多个 HTML 入口，站点之间用**路径前缀**区分（不用二级域名 —— 登录态存在 `localStorage`，它按 origin 隔离，换子域就要重新登录）。

| 站点 | 前缀 | HTML 入口 | 启动文件 |
|---|---|---|---|
| system（后台/默认） | `/` | `index.html` | `src/main.ts` |
| mall（商城） | `/mall` | `sites/mall/index.html` | `sites/mall/main.ts` |

唯一事实源是 [`src/config/sites.ts`](src/config/sites.ts)：`vite.config.ts` 的 `build.rollupOptions.input` 和 dev 的入口中间件都从它读，加站点只改这一处（外加 `sites/<code>/{index.html,main.ts}`）。

要点：

- **`src/bootstrap.ts` 里除了样式一律动态 import**。`@/utils/request`、`@/store/modules/permission`、`@/plugins/tab` 都静态依赖 `@/router`，而 router 在模块顶层就要读当前站点；只要有任何一条静态依赖链引到它，站点就还没设上，mall 入口会拿到 system 的根重定向（且不报错）。
- **跨站点链接由 `src/permission.ts` 整页交接，两个方向都交**：任何壳发现目标路径不属于自己（`resolveSiteByPath(to.path) !== getCurrentSite().code`）就 `window.location.assign()` 交给对应入口 —— mall 壳点后台/个人中心会整页进 system，system 门户点「商城」会整页进 mall 壳，谁都不会把对方的页面渲染在自己的壳里、白下对方的 bundle。同域下 `localStorage` 的令牌两边共用，交接过去不用重新登录；站点内部的路由跳转仍是 SPA，不整页刷新。
- **路由表按站点裁剪**（`src/router/index.ts` 的 `routesForCurrentSite()`）：system 是兜底站点，持有 `constantRoutes` 全量；子站点壳只登记本站前缀下的页面（`/mall` 壳 = `/mall*` 十条）加公共兜底页（`/redirect`、`/login`、`/register`、`/401`）和通配 404。通配 404 必须留着，否则未知路径连匹配都没有；跨站路径仍由上一条的整页交接处理，裁剪只是让「对方有没有这条路由」不再是问题。
- **入口 HTML 里的 `<script src>` 必须写根绝对路径**（`/sites/mall/main.ts`）。dev 下 vite 不改写相对路径的 module src，浏览器按当前 URL（`/mall`）解析成 `/main.ts` → 404。

### dev 入口

`vite.config.ts` 的 `wujies:multi-site-dev-entry` 中间件把 `/mall`、`/mall/**` 改写成 `sites/mall/index.html`；带扩展名的请求（`/mall/logo.png`）不改写。访问 `http://localhost:<VITE_APP_PORT>/mall` 即商城入口。

两条 dev 才有的坑：

- **代理 `/site` 的键必须写成正则** `'^/site([/?]|$)'`，不能写 `'/site'`。上面那条中间件跑在 vite 的 proxy **之前**，`/mall/product/1` 已经变成 `/sites/mall/index.html`，而 `'/site'` 是前缀匹配 —— 于是入口地址被转去后端，`/mall` 整栈返回 `{"code":404,"msg":"请求地址不存在"}`。把 CMS 前台 SSR（`/site/**`）代理进来，是为了让 `:4230/site/shop` 与 `/mall` 同源：商品卡上的「查看详情」是相对地址 `/mall/product/{id}`，只有同源才点得通。
- **匿名可达是两份清单**：`src/permission.ts` 的 `whiteList` 走精确相等，带路径参数的路由永远不相等，所以 `/mall/product/:id` 单列在 `whitePrefixList`（匹配 `前缀 + '/'`，防止 `/mall/products` 被顺手放行）。`/mall/checkout/:id` 实测不放行 —— 它 onMounted 就打 `listMemberAddress`，未登录必 401，绕到 `request.ts` 的 401 分支反而丢掉 `portalApp`、`redirect` 还被二次编码。

### nginx

前缀站点必须**排在 `/` 前面**，否则 `/mall/xxx` 会被根入口吃掉，Vue 拿到 `/mall/product` 这条它没有的路由，页面空白或 404：

```nginx
location /mall {
    try_files $uri /sites/mall/index.html;
}

location / {
    try_files $uri $uri/ /index.html;
}
```

本地用 `npm run preview` 验不了这段（vite preview 不带上面这条 try_files），要么起 nginx/openresty，要么直接部署后验。

---

## 相关文档

| 文档 | 位置 |
|---|---|
| 平台总览 | [`wujies-platform`](https://gitee.com/impressivel/wujies-platform) README |
| 管理端与远程应用约定 | [`wujies-admin`](https://gitee.com/impressivel/wujies-admin) README |
| 插件开发全流程 | [`wujies-plugins`](https://gitee.com/impressivel/wujies-plugins) `docs/插件开发指南.md` |

---

## 许可

[MIT](LICENSE)。本项目是 RuoYi-Vue-Plus 5.X 的衍生作品，遵循 MIT 协议并保留原作者版权声明。