Vue 后台项目 Nginx 部署笔记（SPA / Vite 构建）

📘 Vue 后台项目 Nginx 部署笔记（SPA / Vite 构建）

一、整体说明

该 Nginx 配置用于部署一个 Vue 后台管理系统（Vite 构建，SPA 单页应用），具备以下特点：

• 同时支持 HTTP(80) / HTTPS(443)

• 使用 SSL 证书

• 直接托管 Vue 构建后的静态文件

• 支持 SPA 路由 fallback

• 限制 .git 等敏感目录访问

• 配置了基础 CORS 响应头

 

server {
    listen 80;
    server_name api-xxx-admin.xxx.com;
    #（第一种）把http的域名请求转成https
    return 301 https://$host$request_uri;

}
server {
    #listen       80;
    listen       443 ssl;
    server_name  api-xxx-admin.xxx.com;

    client_max_body_size 512m;

    ssl_certificate      /app/certs/xxx.com/current/xxx.crt;
    ssl_certificate_key  /app/certs/xxx.com/current/xxx.key;

    access_log   /app/app_ads_svr/logs/nginx/apptovid_admin_access.log;
    error_log    /app/app_ads_svr/logs/nginx/apptovid_admin_error.log;

    # 指向 Vue 构建的 dist 目录
    root /app/app_ads_svr/admin/pages;

    # 防止 favicon.ico 触发 SPA fallback
    location = /favicon.ico {
        try_files $uri =404;
    }

    # 处理 Vite 构建的静态资源
    location /assets/ {
        try_files $uri =404;
    }

    # Vue SPA fallback
    location / {
        try_files $uri /index.html;
        add_header Access-Control-Allow-Methods *;
        add_header Access-Control-Max-Age 3600;
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Allow-Origin *;
    }

    # 禁止访问 .git
    location /.git {
        deny all;
        return 403;
    }
}