同项目中页面启动后静态文件问题

使用 Nginx 代理后，前端页面的静态资源（如 JS、CSS）因相对路径问题导致加载失败。以下是解决方案：

1. 修改 Nginx 配置

在 Nginx 配置文件中添加或修改以下内容：

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:8080;  # 代理到本地运行的 JAR 包端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 代理静态资源路径
    location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ {
        proxy_pass http://localhost:8080;  # 保持与主代理一致
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

关键点‌：

location ~* \.(css|js|png|jpg|jpeg|gif|ico)$：匹配所有静态资源文件扩展名。
proxy_pass：保持与主代理路径一致，确保资源路径正确解析。

2. 修改前端资源路径

如果前端资源路径是相对路径（如 ./css/style.css），建议改为绝对路径（如 /css/style.css），以避免代理后路径解析错误。

3. 检查资源路径

在浏览器开发者工具中查看资源加载错误，确认路径是否正确。例如：

错误路径：/app/css/style.css（代理后路径错误）
正确路径：/css/style.css（保持与 Nginx 配置一致）

4. 重启 Nginx

修改配置后，执行以下命令重启 Nginx：
sudo systemctl restart nginx

注意事项
路径一致性‌：确保 Nginx 配置中的 proxy_pass 路径与 JAR 包实际路径一致。
资源缓存‌：清除浏览器缓存或使用无痕模式测试，避免缓存干扰。

通过以上配置，Nginx 将正确代理静态资源路径，避免因相对路径导致的加载失败问题。

5. 配置作用

location ~* \.(css|js|png|jpg|jpeg|gif|ico)$
该配置是Nginx里用来匹配静态资源文件的，~*表示不区分大小写的正则匹配，后面跟着的.和$分别匹配文件扩展名开头和结尾，中间的就是常见的静态文件类型（css、js、图片等）。
简单来说，它能让Nginx精准识别并处理这些文件，避免路径问题导致加载失败。