408 lines
11 KiB
Markdown
408 lines
11 KiB
Markdown
# 9.3 环境与构建配置
|
||
|
||
:::tip 概述
|
||
本节说明前端项目的环境变量配置和 Vite 构建配置，包括开发环境和生产环境的差异配置。前端通过 `.env` 文件管理环境变量，Vite 自动根据模式加载对应的 `.env` 文件。
|
||
:::
|
||
|
||
## 环境变量文件
|
||
|
||
```text
|
||
ui/
|
||
├── .env # 所有环境通用配置（端口、标题）
|
||
├── .env.development # 开发环境（pnpm dev，默认 mode）
|
||
├── .env.production # 生产构建（pnpm build / pnpm build:prod）
|
||
└── .env.test # 测试构建（pnpm build:test）
|
||
```
|
||
|
||
**加载优先级：** `.env.{mode}` > `.env`（Vite 标准加载规则，可用 `.env.{mode}.local` 做本地覆盖）
|
||
|
||
## 开发环境配置
|
||
|
||
### `.env.development`
|
||
|
||
```bash
|
||
# 只在开发模式中被载入
|
||
VITE_PORT = 8001
|
||
|
||
# 网站根目录
|
||
VITE_PUBLIC_PATH = /
|
||
|
||
# 是否开启mock
|
||
VITE_USE_MOCK = false
|
||
|
||
# 网站前缀
|
||
VITE_BASE_URL = /
|
||
|
||
# 是否删除console
|
||
VITE_DROP_CONSOLE = true
|
||
|
||
# 跨域代理，可以配置多个，请注意不要换行
|
||
VITE_PROXY=[["/api","http://admin.laravel13.naivevue/api"]]
|
||
|
||
# API 接口地址
|
||
VITE_GLOB_API_URL =
|
||
|
||
# 图片上传地址
|
||
VITE_GLOB_UPLOAD_URL =
|
||
|
||
# 图片前缀地址
|
||
VITE_GLOB_IMG_URL =
|
||
|
||
# 接口前缀
|
||
VITE_GLOB_API_URL_PREFIX = /api
|
||
```
|
||
|
||
:::tip 代理目标地址
|
||
`VITE_PROXY` 是开发代理的唯一配置来源，当前值指向 Laragon 虚拟主机 `http://admin.laravel13.naivevue/api`（见 [2.2 Laragon 环境搭建](/zh/quickstart/laragon.html)）。修改后需重启 `pnpm dev` 生效。
|
||
:::
|
||
|
||
## 生产环境配置
|
||
|
||
### `.env.production`
|
||
|
||
```bash
|
||
# 是否开启mock
|
||
VITE_USE_MOCK = false
|
||
|
||
# 网站根目录
|
||
VITE_PUBLIC_PATH = /
|
||
|
||
# 网站前缀
|
||
VITE_BASE_URL = /
|
||
|
||
# 是否删除console
|
||
VITE_DROP_CONSOLE = true
|
||
|
||
# API
|
||
VITE_GLOB_API_URL =
|
||
|
||
# 图片上传地址
|
||
VITE_GLOB_UPLOAD_URL =
|
||
|
||
# 图片前缀地址
|
||
VITE_GLOB_IMG_URL =
|
||
|
||
# 接口前缀
|
||
VITE_GLOB_API_URL_PREFIX = /api
|
||
|
||
# 是否启用gzip压缩或brotli压缩
|
||
# 可选: gzip | brotli | none
|
||
# 如果你需要多种形式，你可以用','来分隔
|
||
VITE_BUILD_COMPRESS = 'none'
|
||
|
||
# 使用压缩时是否删除原始文件，默认为false
|
||
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
|
||
```
|
||
|
||
:::info 生产环境没有 VITE_PROXY
|
||
`VITE_PROXY` 仅在开发模式由 Vite dev server 使用；生产环境由 Nginx 反向代理 `/api`（见下方部署配置）。
|
||
:::
|
||
|
||
## 环境变量详解
|
||
|
||
### VITE_PORT — 开发服务器端口
|
||
|
||
| 环境 | 值 | 说明 |
|
||
|------|-----|------|
|
||
| 开发 | `8001` | 前端开发服务器端口 |
|
||
| 生产 | 不生效 | 生产环境由 Nginx 提供服务 |
|
||
|
||
### VITE_PUBLIC_PATH — 公共基础路径
|
||
|
||
| 场景 | 值 | 说明 |
|
||
|------|-----|------|
|
||
| 根目录部署 | `/` | 默认值 |
|
||
| 子目录部署 | `/admin/` | 如 `https://example.com/admin/` |
|
||
|
||
### VITE_GLOB_API_URL — API 基础路径
|
||
|
||
| 场景 | 值 | 说明 |
|
||
|------|-----|------|
|
||
| 开发（代理） | 留空 | 由 Vite proxy 转发 |
|
||
| 生产（同域） | 留空 | 由 Nginx 代理 |
|
||
| 生产（跨域） | `https://api.example.com` | 直接请求后端域名（需后端 CORS 放行） |
|
||
|
||
### VITE_PROXY — 开发代理配置
|
||
|
||
```bash
|
||
# .env.development 中的值（指向 Laragon 虚拟主机）
|
||
VITE_PROXY=[["/api","http://admin.laravel13.naivevue/api"]]
|
||
```
|
||
|
||
**格式：** JSON 数组，每项为 `[前缀, 目标地址]`
|
||
|
||
**作用：** 将前端 `/api/*` 请求代理到后端地址，解决开发环境跨域问题（代理方式下不依赖后端 CORS 配置）。
|
||
|
||
**多代理示例：**
|
||
|
||
```bash
|
||
VITE_PROXY = [["/api","http://admin.laravel13.naivevue/api"],["/uploads","http://admin.laravel13.naivevue/uploads"]]
|
||
```
|
||
|
||
### VITE_GLOB_API_URL_PREFIX — API 前缀
|
||
|
||
```bash
|
||
VITE_GLOB_API_URL_PREFIX = /api
|
||
```
|
||
|
||
所有 API 请求路径的前缀，与后端路由前缀一致（`bootstrap/app.php` 统一添加 `/api`）。
|
||
|
||
### VITE_GLOB_UPLOAD_URL — 上传接口地址
|
||
|
||
```bash
|
||
VITE_GLOB_UPLOAD_URL=
|
||
```
|
||
|
||
文件上传组件使用的接口地址（实际调用 `/api/upload/uploadFile`）。**当前项目留空**——上传走同域/开发代理，跨域部署时再配置为后端完整地址。
|
||
|
||
### VITE_GLOB_IMG_URL — 图片访问地址
|
||
|
||
```bash
|
||
VITE_GLOB_IMG_URL=
|
||
```
|
||
|
||
用于预览上传的图片，拼接图片的完整 URL。**当前项目留空**（后端 `get_file_url()` 已按 `FILE_DOMAIN_URL` 补全域名）；如配置，**必须与后端 `FILE_DOMAIN_URL` 保持一致**，否则同一张图片前后端解析出不同地址。
|
||
|
||
### VITE_DROP_CONSOLE — 删除 console
|
||
|
||
```bash
|
||
# 当前项目开发与生产构建均为 true（删除 console）
|
||
VITE_DROP_CONSOLE = true
|
||
|
||
# 需要调试时可在本地改为 false
|
||
```
|
||
|
||
### VITE_BUILD_COMPRESS — Gzip 压缩
|
||
|
||
```bash
|
||
# 当前默认关闭
|
||
VITE_BUILD_COMPRESS = 'none'
|
||
|
||
# 可选：gzip / brotli（多个用逗号分隔），启用后构建产物生成 .gz 文件，
|
||
# Nginx 配置 gzip_static on 可直接使用
|
||
VITE_BUILD_COMPRESS = 'gzip'
|
||
```
|
||
|
||
## 在代码中访问环境变量
|
||
|
||
```typescript
|
||
// 读取环境变量（VITE_ 前缀的变量才会暴露给客户端）
|
||
const apiUrl = import.meta.env.VITE_GLOB_API_URL;
|
||
const apiPrefix = import.meta.env.VITE_GLOB_API_URL_PREFIX;
|
||
const uploadUrl = import.meta.env.VITE_GLOB_UPLOAD_URL;
|
||
const imgUrl = import.meta.env.VITE_GLOB_IMG_URL;
|
||
|
||
// 完整 API 地址
|
||
const fullApiUrl = apiUrl + apiPrefix; // 如 "/api" 或 "https://api.example.com/api"
|
||
```
|
||
|
||
:::warning VITE_ 前缀
|
||
只有以 `VITE_` 开头的环境变量才会暴露给客户端代码，其他变量（如 `PORT`）不会被访问到。
|
||
:::
|
||
|
||
## Vite 配置
|
||
|
||
### `vite.config.ts`
|
||
|
||
```typescript
|
||
// ui/vite.config.ts（摘自实际代码，节选）
|
||
export default ({ command, mode }: ConfigEnv): UserConfig => {
|
||
const root = process.cwd();
|
||
const env = loadEnv(mode, root);
|
||
const viteEnv = wrapperEnv(env); // VITE_PROXY 在此由字符串 JSON.parse 为数组（见 build/utils.ts）
|
||
const { VITE_PUBLIC_PATH, VITE_PORT, VITE_GLOB_PROD_MOCK, VITE_PROXY } = viteEnv;
|
||
|
||
return {
|
||
base: VITE_PUBLIC_PATH,
|
||
server: {
|
||
host: true,
|
||
port: VITE_PORT, // 端口来自 .env.development 的 VITE_PORT
|
||
proxy: createProxy(VITE_PROXY), // 见 build/vite/proxy.ts
|
||
},
|
||
// ... 插件、路径别名等见 ui/vite.config.ts 全文
|
||
};
|
||
};
|
||
|
||
// ui/build/utils.ts —— wrapperEnv 中对 VITE_PROXY 做 JSON 解析
|
||
if (envName === 'VITE_PROXY') {
|
||
try {
|
||
realName = JSON.parse(realName);
|
||
} catch (error) {}
|
||
}
|
||
|
||
// ui/build/vite/proxy.ts —— 由 [前缀, 目标] 数组生成代理规则
|
||
export function createProxy(list: ProxyList = []) {
|
||
const ret: ProxyTargetList = {};
|
||
for (const [prefix, target] of list) {
|
||
ret[prefix] = {
|
||
target,
|
||
changeOrigin: true,
|
||
ws: true,
|
||
rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''), // 去掉前缀再转发
|
||
};
|
||
}
|
||
return ret;
|
||
}
|
||
```
|
||
|
||
### 代理配置详解
|
||
|
||
```typescript
|
||
// createProxy 为每个 [前缀, 目标] 生成的规则（ui/build/vite/proxy.ts 实际逻辑）
|
||
server: {
|
||
proxy: {
|
||
'/api': {
|
||
target: 'http://admin.laravel13.naivevue/api', // 目标地址（VITE_PROXY 驱动，含 /api 前缀）
|
||
changeOrigin: true, // 修改请求头 Origin
|
||
ws: true, // 支持 WebSocket
|
||
rewrite: (path) => path.replace(new RegExp('^/api'), ''), // 去掉前缀，由目标地址补回
|
||
},
|
||
},
|
||
}
|
||
```
|
||
|
||
**代理效果：**
|
||
|
||
```text
|
||
前端请求: GET /api/user/page
|
||
│
|
||
▼ Vite proxy
|
||
│
|
||
▼ 转发到: http://admin.laravel13.naivevue/api/user/page
|
||
```
|
||
|
||
## 构建命令
|
||
|
||
```bash
|
||
# 开发服务器（热更新）
|
||
pnpm dev
|
||
|
||
# 构建生产版本
|
||
pnpm build
|
||
|
||
# 预览构建结果（本地启动静态服务器）
|
||
pnpm preview
|
||
|
||
# ESLint 检查 / 自动修复
|
||
pnpm lint:eslint
|
||
pnpm lint:eslint --fix
|
||
|
||
# TypeScript 类型检查
|
||
pnpm type:check
|
||
```
|
||
|
||
### 构建产物
|
||
|
||
```text
|
||
ui/dist/
|
||
├── index.html # 入口文件
|
||
├── assets/
|
||
│ ├── index-xxx.js # 主 JS（带 hash）
|
||
│ ├── index-xxx.css # 主 CSS（带 hash）
|
||
│ └── vue-xxx.js # Vue 相关（分包）
|
||
├── favicon.ico
|
||
└── static/ # 静态资源
|
||
```
|
||
|
||
## 部署配置
|
||
|
||
### Nginx 配置
|
||
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name admin.example.com;
|
||
|
||
# 前端静态文件
|
||
root /data/www/admin/dist;
|
||
index index.html;
|
||
|
||
# SPA 路由（所有非文件请求都返回 index.html）
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
|
||
# API 代理到后端
|
||
location /api/ {
|
||
proxy_pass http://127.0.0.1:8000/api/;
|
||
proxy_set_header Host $host;
|
||
proxy_set_header X-Real-IP $remote_addr;
|
||
}
|
||
|
||
# 静态资源缓存
|
||
location /assets/ {
|
||
expires 30d;
|
||
add_header Cache-Control "public, immutable";
|
||
}
|
||
|
||
# Gzip 压缩
|
||
gzip on;
|
||
gzip_static on; # 优先使用 .gz 文件
|
||
gzip_types text/css application/javascript application/json;
|
||
}
|
||
```
|
||
|
||
## 多环境配置
|
||
|
||
### 测试环境（项目实际提供）
|
||
|
||
```bash
|
||
# .env.test（pnpm build:test）
|
||
VITE_USE_MOCK = true
|
||
VITE_PUBLIC_PATH = /
|
||
VITE_BASE_URL = /
|
||
VITE_DROP_CONSOLE = true
|
||
VITE_GLOB_API_URL =
|
||
VITE_GLOB_UPLOAD_URL =
|
||
VITE_GLOB_IMG_URL =
|
||
VITE_GLOB_API_URL_PREFIX = /api
|
||
VITE_BUILD_COMPRESS = 'none'
|
||
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
|
||
```
|
||
|
||
构建命令（见 `ui/package.json` scripts）：
|
||
|
||
```bash
|
||
pnpm build:test # 测试环境构建
|
||
pnpm build:prod # 生产环境构建（与 pnpm build 等价）
|
||
```
|
||
|
||
### 环境变量对照表
|
||
|
||
| 变量 | 开发 | 测试 | 生产 |
|
||
|------|------|------|------|
|
||
| `VITE_PORT` | 8001 | - | - |
|
||
| `VITE_BASE_URL` | / | / | / |
|
||
| `VITE_GLOB_API_URL` | 留空 | 留空 | 留空 |
|
||
| `VITE_GLOB_API_URL_PREFIX` | /api | /api | /api |
|
||
| `VITE_PROXY` | `[["/api","http://admin.laravel13.naivevue/api"]]` | - | - |
|
||
| `VITE_GLOB_IMG_URL` | 留空 | 留空 | 留空（按需配置 CDN） |
|
||
| `VITE_DROP_CONSOLE` | true | true | true |
|
||
| `VITE_USE_MOCK` | false | true | false |
|
||
|
||
## 常见问题
|
||
|
||
### 问题 1：开发环境 API 请求 404
|
||
|
||
**原因：** 代理配置错误或后端未启动。
|
||
|
||
**解决：** 检查 `.env.development` 中 `VITE_PROXY` 的目标地址是否正确，`curl http://admin.laravel13.naivevue/api/captcha` 验证后端；改完配置重启 `pnpm dev`。
|
||
|
||
### 问题 2：生产环境 API 请求跨域
|
||
|
||
**原因：** `VITE_GLOB_API_URL` 配置了跨域地址但后端未配置 CORS。
|
||
|
||
**解决：** 推荐留空，由 Nginx 代理处理（同域无跨域问题）；确需跨域时在后端 `.env` 配置 `CORS_ALLOW_ORIGIN`（见 [5.5 跨域资源共享](/zh/core/cors.html)）。
|
||
|
||
### 问题 3：图片不显示
|
||
|
||
**原因：** `VITE_GLOB_IMG_URL` 与后端 `FILE_DOMAIN_URL` 不一致。
|
||
|
||
**解决：** 两者保持一致；改后端配置需 `php artisan config:clear`。
|
||
|
||
### 问题 4：构建后体积过大
|
||
|
||
**原因：** 未启用 gzip 压缩或未分包。
|
||
|
||
**解决：** 启用 `VITE_BUILD_COMPRESS = gzip`，配置 `manualChunks` 分包。
|