运行与构建
ShopTNT 8.0 PC 前端是一个 pnpm workspace,包含买家 PC 端、商家管理端和平台管理端三个 Vue 3 + Vite 应用。所有命令都应在前端仓库根目录执行。
适用范围
本文只说明 8.0 PC 前端仓库。移动端、小程序和 App 不在该仓库中,不能沿用旧版移动端或多工程前端操作步骤。
安装依赖
仓库声明使用 pnpm@11.7.0,不要使用 npm 或 Yarn 安装依赖。
corepack enable
corepack prepare pnpm@11.7.0 --activate
test "$(pnpm --version)" = "11.7.0"
pnpm install
持续集成或需要严格复现锁文件时使用:
pnpm install --frozen-lockfile
环境变量、API 地址、页面域名、部署子路径和功能开关见配置文件详解。VITE_* 会进入浏览器产物,禁止写入密钥、数据库密码、私钥或长期令牌。
本地运行
| 应用 | 命令 | 默认地址 |
|---|---|---|
| 买家 PC 端 | pnpm dev:pc | http://localhost:3000 |
| 商家管理端 | pnpm dev:seller | http://localhost:3002 |
| 平台管理端 | pnpm dev:admin | http://localhost:3003 |
也可以同时启动三端:
pnpm dev
开发服务读取 .env.development,本机私有覆盖值应放在 .env.development.local。Vite 不会自动打开浏览器;命令启动后访问表格中的地址。
构建命令
构建全部应用
| 场景 | 命令 | Vite mode | 读取的环境文件 |
|---|---|---|---|
| 开发构建 | pnpm build:dev | development | .env.development |
| 测试构建 | pnpm build:test | test | .env.test |
| 生产构建 | pnpm build | production | .env.production |
构建单个应用
| 应用 | 开发构建 | 测试构建 | 生产构建 |
|---|---|---|---|
| 买家 PC 端 | pnpm build:dev:pc | pnpm build:test:pc | pnpm build:pc |
| 商家管理端 | pnpm build:dev:seller | pnpm build:test:seller | pnpm build:seller |
| 平台管理端 | pnpm build:dev:admin | pnpm build:test:admin | pnpm build:admin |
8.0 没有 build:prod 命令。生产构建使用根目录的 pnpm build,或使用表格中的单端生产命令。
构建产物
三个应用分别输出到:
apps/pc/dist
apps/seller/dist
apps/admin/dist
每个 dist 都是独立的静态站点。部署时只发布目标端的 dist 内容,不要发布源码、.env.*、node_modules 或 .git。
构建还会在每个产物根目录生成 version 文件,用于客户端判断线上静态资源是否已更新。发布或回滚时应让 index.html、version 和 assets/ 来自同一次构建,不能混用不同批次的文件。
发布前检查
全量发布前建议依次执行:
pnpm typecheck
pnpm lint
pnpm locale:check
pnpm build
只发布一个应用时,至少执行对应端的生产构建,并确认该端的 dist/index.html 和 dist/version 非空。
Vite 的大分包提示属于容量警告,不等于构建失败;命令非零退出、缺少环境变量或缺少目标产物时必须停止发布,不能忽略错误继续同步文件。
部署检查
部署虚拟路径由 VITE_BASE_PC、VITE_BASE_SELLER 和 VITE_BASE_ADMIN 决定,必须与 Web 服务器的站点路径一致。发布后至少检查:
- 三端首页能够访问。
- 进入二级页面后刷新不会返回 404。
- JS、CSS、字体和图片资源均返回 200。
- API 地址没有指向本机或错误环境。
- 后台菜单与当前账号权限一致。
version文件与本次发布批次一致。
Nginx、独立域名、同域名子路径和回滚方式见部署 PC 前端。