mirror of
https://github.com/KwiTsukasa/kt-template-admin.git
synced 2026-05-27 16:35:47 +08:00
153 lines
2.5 KiB
Markdown
153 lines
2.5 KiB
Markdown
# 构建与部署
|
||
|
||
## 构建
|
||
|
||
### 构建命令
|
||
|
||
```bash
|
||
# 构建所有应用
|
||
pnpm build
|
||
|
||
# 构建指定应用
|
||
pnpm build:antd
|
||
pnpm build:ele
|
||
pnpm build:naive
|
||
```
|
||
|
||
### 环境变量
|
||
|
||
```bash
|
||
# .env.production
|
||
VITE_APP_TITLE=Vben Admin
|
||
VITE_APP_NAMESPACE=vben-web-antd
|
||
VITE_BASE=/
|
||
VITE_GLOB_API_URL=https://api.example.com
|
||
VITE_COMPRESS=gzip # 压缩方式: none, brotli, gzip
|
||
VITE_PWA=false # PWA支持
|
||
VITE_ROUTER_HISTORY=hash # 路由模式: hash, history
|
||
VITE_INJECT_APP_LOADING=true # 注入全局loading
|
||
VITE_ARCHIVER=true # 生成dist.zip
|
||
```
|
||
|
||
## 预览
|
||
|
||
```bash
|
||
# 预览构建结果
|
||
pnpm preview
|
||
```
|
||
|
||
## 压缩
|
||
|
||
```bash
|
||
# gzip压缩
|
||
VITE_COMPRESS=gzip
|
||
|
||
# brotli压缩
|
||
VITE_COMPRESS=brotli
|
||
|
||
# 不压缩
|
||
VITE_COMPRESS=none
|
||
```
|
||
|
||
## 分析构建
|
||
|
||
```bash
|
||
# 分析构建产物
|
||
pnpm analyze
|
||
```
|
||
|
||
## 部署
|
||
|
||
### Nginx 配置
|
||
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name example.com;
|
||
root /usr/share/nginx/html;
|
||
index index.html;
|
||
|
||
# 开启gzip压缩
|
||
gzip on;
|
||
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
|
||
gzip_min_length 1024;
|
||
|
||
# hash路由配置
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
|
||
# history路由配置
|
||
# location / {
|
||
# try_files $uri $uri/ /index.html;
|
||
# }
|
||
|
||
# API代理
|
||
location /api {
|
||
proxy_pass http://backend:8080;
|
||
proxy_set_header Host $host;
|
||
proxy_set_header X-Real-IP $remote_addr;
|
||
}
|
||
|
||
# 静态资源缓存
|
||
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
|
||
expires 1y;
|
||
add_header Cache-Control "public, immutable";
|
||
}
|
||
}
|
||
```
|
||
|
||
## 动态配置
|
||
|
||
打包后可通过修改 `_app.config.js` 动态修改配置：
|
||
|
||
```js
|
||
// dist/_app.config.js
|
||
window._VBEN_ADMIN_PRO_APP_CONF_ = {
|
||
VITE_GLOB_API_URL: 'https://api.example.com',
|
||
};
|
||
```
|
||
|
||
## PWA 支持
|
||
|
||
```bash
|
||
# 开启PWA
|
||
VITE_PWA=true
|
||
```
|
||
|
||
## 路由模式
|
||
|
||
```bash
|
||
# hash模式（默认）
|
||
VITE_ROUTER_HISTORY=hash
|
||
|
||
# history模式（需要服务器配置）
|
||
VITE_ROUTER_HISTORY=history
|
||
```
|
||
|
||
## CDN 部署
|
||
|
||
```bash
|
||
# 设置公共资源路径
|
||
VITE_BASE=https://cdn.example.com/
|
||
```
|
||
|
||
## 常见问题
|
||
|
||
### 1. 构建内存溢出
|
||
|
||
```bash
|
||
# 增加Node内存
|
||
NODE_OPTIONS=--max_old_space_size=4096 pnpm build
|
||
```
|
||
|
||
### 2. 静态资源404
|
||
|
||
- 检查 `VITE_BASE` 配置是否正确
|
||
- 确保Nginx配置了正确的root路径
|
||
|
||
### 3. 跨域问题
|
||
|
||
- 开发环境：配置vite proxy
|
||
- 生产环境：配置Nginx代理或后端开启CORS
|