在Vite.config.js中配置base后如何正确配置Nginx？

核心问题分析 #

Vite配置base: "/main"后，构建产物的所有资源引用路径都会以/main开头，同时SPA路由也会基于该路径。Nginx返回500错误通常是路径映射错误或文件权限不足导致的。

修改后的Nginx配置示例 #

根据你的项目部署目录，选择以下两种配置方式之一：

方式1：将构建后的dist目录内容放入Nginx的html/main子目录

假设Nginx默认静态文件目录为/usr/share/nginx/html，将dist下的所有文件复制到/usr/share/nginx/html/main，然后配置：

server {
    listen 80;
    server_name 你的域名或IP;

    location /main {
        root /usr/share/nginx/html;
        # 处理静态资源和SPA路由 fallback
        try_files $uri $uri/ /main/index.html;
        # 可选：开启gzip压缩优化加载速度
        gzip on;
        gzip_types text/css application/javascript image/svg+xml;
    }
}

方式2：直接使用alias映射dist目录

如果dist目录放在/usr/share/nginx/html/dist，无需移动文件，用alias直接映射路径：

server {
    listen 80;
    server_name 你的域名或IP;

    location /main {
        alias /usr/share/nginx/html/dist;
        try_files $uri $uri/ /main/index.html;
        gzip on;
        gzip_types text/css application/javascript image/svg+xml;
    }
}

关键配置说明 #

• location /main：精准匹配所有以/main开头的请求
• root/alias：将请求路径映射到实际静态文件目录，root会拼接location路径到指定目录后，alias直接替换location路径为目标目录
• try_files：处理SPA路由，当请求的文件/目录不存在时，返回index.html，避免路由跳转404
• gzip：可选配置，优化资源加载速度

修复权限问题（500常见诱因） #

Nginx进程通常以www-data用户运行，需确保其对静态文件目录有读取权限：

# 对应方式1的目录权限设置
chown -R www-data:www-data /usr/share/nginx/html/main

# 对应方式2的目录权限设置
chown -R www-data:www-data /usr/share/nginx/html/dist

验证与重启 #

1. 检查Nginx配置语法是否正确：

nginx -t

2. 配置无误后重启Nginx：

systemctl restart nginx

内容的提问来源于stack exchange，提问作者amir tbi