# 9.3 环境与构建配置

:::tip 概述
前端构建基于 Vite 多环境模式：dev/test/uat/prod 四套构建命令 + 环境变量文件。开发环境经 Vite proxy 代理 /api 到后端；生产构建产物交 Nginx 托管。
:::

## 构建命令（package.json）

```sh
pnpm dev            # 开发服务器（vite）
pnpm build          # production 模式构建 + postBuild 后处理
pnpm build:prod     # --mode production
pnpm build:uat      # --mode uat
pnpm build:test     # --mode test
pnpm build:dev      # --mode dev
pnpm preview        # 构建 + vite preview 本地预览
pnpm type:check     # vue-tsc --noEmit --skipLibCheck
```

构建产物经 `build/script/postBuild.ts` 后处理输出 `dist/`。

## Vite 配置要点（vite.config.ts）

```text
关键配置：
  * Vite 端口与 host
  * proxy：/api → http://127.0.0.1:8000（开发代理，同源化）
  * 别名 @ → src
  * unplugin-auto-import / 组件自动注册等工程插件
```

开发代理让前端"同源"访问后端——dev 环境无 CORS 问题；生产建议 Nginx 同域反代 /api。

## 环境变量

```text
.env.development / .env.test / .env.uat / .env.production

常用键（以项目实际文件为准）：
  VITE_PORT                  开发端口（默认 8001）
  VITE_PUBLIC_PATH           部署公网路径（子路径部署时配置）
  VITE_GLOB_API_URL          API 地址（baseURL，一般留空，由前缀拼接）
  VITE_GLOB_API_URL_PREFIX   API 版本前缀（/api，与后端公开路径规则配套）
  VITE_GLOB_UPLOAD_URL       上传接口地址
  VITE_GLOB_IMG_URL          图片服务地址（对应后端 file.domainUrl）
```

代码经 `useGlobSetting()`（hooks/setting）读取环境变量，统一收敛不散落。

## baseURL 与代理的配合

```text
开发：axios baseURL = /api → Vite proxy 转发 :8000
生产：axios baseURL = /api → Nginx location /api/ 反代后端

注意：接口 url 在 api 模块里不写 /api 前缀（如 '/user/page'），
     baseURL 已含 /api；后端 gmeta path 是 /api/user/page——两层拼接对齐。
无 /v1 版本段：不要拼 /v1。
```

## lint 与质量工具

| 工具 | 命令 | 作用 |
|------|------|------|
| ESLint | pnpm lint:eslint | TS/Vue 代码检查修复 |
| Prettier | pnpm lint:prettier | 格式化 |
| Stylelint | pnpm lint:stylelint | 样式检查 |
| commitlint | （husky 提交钩子） | 提交信息规范 |
| vue-tsc | pnpm type:check | 类型检查 |

## 生产部署形态

```text
Nginx：
  location /        → 静态资源 dist/
  location /api/    → 反代后端 :8000
  location /upload/ → 反代后端（或直挂文件服务/CDN）
  try_files $uri $uri/ /index.html   （SPA 路由回退）

子路径部署：VITE_PUBLIC_PATH=/admin/ + Nginx location /admin/
详见 11.5 前端部署
```