# 9.3 环境与构建配置

:::tip 概述
环境变量经 `ui/.env.development` / `.env.production` 管理，键以 `VITE_` 开头。开发期核心是代理配置，构建期核心是压缩与产物控制。
:::

## 开发环境（.env.development）

```text
VITE_PORT = 8001                        # 开发端口
VITE_PUBLIC_PATH = /                    # 站点根路径
VITE_USE_MOCK = false                   # mock 开关
VITE_DROP_CONSOLE = true                # 移除 console
VITE_PROXY=[["/api", "http://127.0.0.1:8000/api"]]   # 代理（支持多条，勿换行）
VITE_GLOB_API_URL_PREFIX = /api         # 接口前缀
VITE_GLOB_API_URL =                     # 接口基址（代理场景留空）
VITE_GLOB_UPLOAD_URL =                  # 上传基址
VITE_GLOB_IMG_URL =                     # 图片前缀
```

代理把页面的 `/api/**` 转发到后端 8000——开发期同源请求，无需处理 CORS。

## 生产环境（.env.production）

无 VITE_PORT/VITE_PROXY（构建产物不带开发服务器），接口基址经 `VITE_GLOB_API_URL` 或反代同源处理；`VITE_BUILD_COMPRESS` 控制 gzip/brotli。

## 关键键说明

| 键 | 用途 |
|---|---|
| VITE_GLOB_API_URL_PREFIX | 请求 URL 统一前缀（api 模块里写不带 /api 的相对路径） |
| VITE_GLOB_API_URL | 部署时 API 基址（跨域部署填网关地址） |
| VITE_GLOB_IMG_URL / UPLOAD_URL | 图片/上传访问基址（与后端 file.domainUrl 对齐） |
| VITE_BUILD_COMPRESS | 构建压缩：gzip / brotli / none（可逗号分隔多种） |

## vite.config.ts

- 插件：vue + 自动导入（unplugin-auto-import）+ svg/路径插件
- server.proxy 读 VITE_PROXY 动态生成
- 构建分包与 sourcemap 策略在 build 节

## 修改后生效

`.env.*` 与 `vite.config.ts` 修改需**重启 dev server**；代码热更新即时生效。

## 相关

- [2.5 前端服务启动](/zh/quickstart/frontend-start.html)
- [11.5 前端部署](/zh/deploy/frontend.html)