Nginx 配置完反向代理后页面加载空白怎么办？

长孙东宇提问于 2026-02-28 13:22:22 阅读 24

前端

我本地用 Vue 开发了一个前端项目，打包后放到 Nginx 里，想通过反向代理访问后端 API，但配置完之后页面完全空白，控制台也没报错。

我试过直接访问静态文件是正常的，但加上 proxy_pass 之后就不行了。我的 Nginx 配置大概长这样：

server {
    listen 80;
    server_name localhost;
    root /dist;
    index index.html;

    location /api/ {
        proxy_pass http://localhost:3000/;
    }

    location / {
        try_files $uri $uri/ /index.html;
    }
}

是不是哪里写错了？为什么加了代理反而页面出不来了？

我来解答赞 5 收藏

反馈

1 条解答

克培 Lv1

看了你的配置，问题大概率出在 root /dist; 这个路径上。这是个绝对路径，指向的是根目录下的 /dist，你确定你的打包文件放那儿了？一般应该是 /usr/share/nginx/html/dist 或者你项目的实际路径。

另外，页面空白但控制台没报错，通常是静态资源 404 了，打开浏览器 Network 面板看看 js、css 文件是不是红色的。

代码给你，照着改：

server {

    listen 80;

    server_name localhost;



    # 这里改成你的实际路径，别用 /dist 这种根路径

    root /usr/share/nginx/html/dist;

    index index.html;



    location /api/ {

        proxy_pass http://localhost:3000/;

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

    }



    location / {

        try_files $uri $uri/ /index.html;

    }

}

改完记得 reload 一下：

nginx -t  # 先测试配置有没有语法错误

nginx -s reload

还有个坑，Vue 打包的时候检查一下 vue.config.js 或者 vite.config.js 里的 publicPath 配置。如果你部署在根路径，设置成 /，如果部署在子路径比如 /app，那 publicPath 也要改成 /app，不然静态资源也会加载不到。

如果还不行，先注释掉 /api/ 那段 location，确认静态资源本身能正常访问，再逐步排查代理的问题。

2026-02-28 17:19