Vue3+.NET8 Web应用部署Ubuntu23.04 VPS后静态资源404求助

1. 检查静态资源路径配置 #

• 确认Vue项目打包时的publicPath配置：若部署在域名根路径，vite.config.js（或vue.config.js）需设置publicPath: '/'；若为子路径，需与Nginx的location配置对应。
• 核对服务器上静态资源的实际存放位置：前端打包后的dist目录是否正确放置到Nginx指定的根目录（如/var/www/html），确保js、css文件夹确实存在于该目录下。

2. 修正Nginx配置 #

以下是适配Vue单页应用+.NET后端的标准Nginx配置示例，替换你的默认配置：

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

    # 前端静态资源根目录
    root /var/www/html/dist;
    index index.html index.htm;

    # 处理前端静态资源请求
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        try_files $uri $uri/ =404;
    }

    # 单页应用路由 fallback，避免刷新页面404
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 转发后端API请求到.NET服务（假设后端监听5000端口）
    location /api/ {
        proxy_pass http://localhost:5000;
        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;
    }
}

• 替换你的服务器域名或IP为实际地址，/var/www/html/dist为前端打包文件的真实路径，/api/和http://localhost:5000需匹配你的后端API前缀与监听端口。

3. 验证文件权限 #

• 赋予Nginx进程静态资源目录访问权限：执行命令 sudo chown -R www-data:www-data /var/www/html/dist
• 调整文件与目录权限：执行 sudo chmod -R 755 /var/www/html/dist，确保静态文件权限为644、目录权限为755。

4. 重启Nginx并验证 #

• 测试Nginx配置合法性：sudo nginx -t
• 重启Nginx生效：sudo systemctl restart nginx
• 打开浏览器开发者工具（F12），查看网络请求中静态资源的路径是否正确，确认返回200状态码。

5. 排查.NET后端静态资源（若涉及） #

若后端也提供静态资源，确认Program.cs中是否正确配置静态文件中间件：

app.UseStaticFiles(); // 启用默认静态文件服务
// 若静态资源在wwwroot外的目录，可指定路径：
// app.UseStaticFiles(new StaticFileOptions { FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "自定义静态目录")), RequestPath = "/static" });

内容的提问来源于stack exchange，提问作者Pablo Ruiz Villagordo