50 lines
1.9 KiB
Markdown
50 lines
1.9 KiB
Markdown
# 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)
|