kt-template-admin/skills/references/deployment/deploy.md

构建与部署

构建

构建命令

# 构建所有应用
pnpm build

# 构建指定应用
pnpm build:antd
pnpm build:ele
pnpm build:naive

环境变量

# .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

预览

# 预览构建结果
pnpm preview

压缩

# gzip压缩
VITE_COMPRESS=gzip

# brotli压缩
VITE_COMPRESS=brotli

# 不压缩
VITE_COMPRESS=none

分析构建

# 分析构建产物
pnpm analyze

部署

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 动态修改配置：

// dist/_app.config.js
window._VBEN_ADMIN_PRO_APP_CONF_ = {
  VITE_GLOB_API_URL: 'https://api.example.com',
};

PWA 支持

# 开启PWA
VITE_PWA=true

路由模式

# hash模式（默认）
VITE_ROUTER_HISTORY=hash

# history模式（需要服务器配置）
VITE_ROUTER_HISTORY=history

CDN 部署

# 设置公共资源路径
VITE_BASE=https://cdn.example.com/

常见问题

1. 构建内存溢出

# 增加Node内存
NODE_OPTIONS=--max_old_space_size=4096 pnpm build

2. 静态资源404

• 检查 VITE_BASE 配置是否正确
• 确保Nginx配置了正确的root路径

3. 跨域问题

• 开发环境：配置vite proxy
• 生产环境：配置Nginx代理或后端开启CORS