跳到主要内容

运行与构建

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:pchttp://localhost:3000
商家管理端pnpm dev:sellerhttp://localhost:3002
平台管理端pnpm dev:adminhttp://localhost:3003

也可以同时启动三端:

pnpm dev

开发服务读取 .env.development,本机私有覆盖值应放在 .env.development.local。Vite 不会自动打开浏览器;命令启动后访问表格中的地址。

构建命令

构建全部应用

场景命令Vite mode读取的环境文件
开发构建pnpm build:devdevelopment.env.development
测试构建pnpm build:testtest.env.test
生产构建pnpm buildproduction.env.production

构建单个应用

应用开发构建测试构建生产构建
买家 PC 端pnpm build:dev:pcpnpm build:test:pcpnpm build:pc
商家管理端pnpm build:dev:sellerpnpm build:test:sellerpnpm build:seller
平台管理端pnpm build:dev:adminpnpm build:test:adminpnpm 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.htmlversionassets/ 来自同一次构建,不能混用不同批次的文件。

发布前检查

全量发布前建议依次执行:

pnpm typecheck
pnpm lint
pnpm locale:check
pnpm build

只发布一个应用时,至少执行对应端的生产构建,并确认该端的 dist/index.htmldist/version 非空。

Vite 的大分包提示属于容量警告,不等于构建失败;命令非零退出、缺少环境变量或缺少目标产物时必须停止发布,不能忽略错误继续同步文件。

部署检查

部署虚拟路径由 VITE_BASE_PCVITE_BASE_SELLERVITE_BASE_ADMIN 决定,必须与 Web 服务器的站点路径一致。发布后至少检查:

  1. 三端首页能够访问。
  2. 进入二级页面后刷新不会返回 404。
  3. JS、CSS、字体和图片资源均返回 200。
  4. API 地址没有指向本机或错误环境。
  5. 后台菜单与当前账号权限一致。
  6. version 文件与本次发布批次一致。

Nginx、独立域名、同域名子路径和回滚方式见部署 PC 前端