前端打包的一些注意事项

框架:vue3 + vite

vite build --mode prodvite build --mode production所匹配的配置文件不同。
--mode production → 加载 .env.production 文件
--mode prod → 加载 .env.prod 文件
默认情况 → 加载 .env 和 .env.production

使用npm run build:prod将读取package.json中的build:prod

{
  "scripts": {
    "build": "vite build",
    "build:prod": "???", // 查看这里的实际定义
    "dev": "vite",
    "preview": "vite preview"
  }
}

一般情况下,要根据服务器配置修改.env.production

# 应用访问路径 例如使用前缀 /admin/
VITE_APP_CONTEXT_PATH = '/admin/'
# 生产环境
VITE_APP_BASE_API = '/prod-api'

对应的服务器配置:

server {
    listen 80;
    server_name your-domain.com;
    
    # 静态资源服务
    location /admin/ {
        alias /path/to/your/dist/;
        try_files $uri $uri/ /admin/index.html;
        index index.html;
        
        # 缓存配置
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
    
    # API 代理配置
    location /prod-api/ {
        proxy_pass http://localhost:8077/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # 可选:超时设置
        proxy_connect_timeout 30s;
        proxy_send_timeout 30s;
        proxy_read_timeout 30s;
    }
    
    # ureport 代理配置
    location /ureport/ {
        proxy_pass http://localhost:8080/ureport/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    # 根路径重定向到 admin(可选)
    location = / {
        return 302 /admin/;
    }
}
posted @ 2025-11-18 16:51  Amnesia_999  阅读(2)  评论(0)    收藏  举报