NGINX部署Angular应用访问出现空白页问题排查求助

我来帮你一步步拆解这个问题，从配置逻辑和资源加载两个核心方向排查：

1. NGINX Location与Root/Alias的路径匹配错误 #

你的配置里用root /home/pwa/dist;配合location /reportpwa/，这是典型的路径映射逻辑错误：

• 当访问/reportpwa/时，NGINX会自动把location前缀拼在root路径后面，尝试读取/home/pwa/dist/reportpwa/下的文件，但你的PWA文件实际在/home/pwa/dist/根目录，这个子文件夹大概率不存在。
• 虽然try_files最终会 fallback 到/index.html（对应/home/pwa/dist/index.html），但这个文件里的静态资源路径（比如/static/js/app.js）会从网站根目录请求，而非/reportpwa/前缀下，导致资源加载失败，页面空白。

修正配置：把root换成alias，并调整try_files的fallback路径，让NGINX正确映射资源：

server {
 listen 123.456.78.90:80;
 location /reportpwa/ {
   alias /home/pwa/dist/; # 直接替换location前缀为实际文件路径
   try_files $uri $uri/ /reportpwa/index.html; # fallback到带前缀的index.html
   index index.html index.htm;
 }
}

2. Location末尾斜杠的匹配问题 #

你的location配置是/reportpwa/（带末尾斜杠），但如果用户访问的是/reportpwa（不带斜杠），NGINX不会匹配这个location，而是走默认服务器配置，可能返回404或错误资源。

解决方法二选一：

• 把location改成/reportpwa（去掉末尾斜杠，这样带不带斜杠的请求都会匹配），再配合上述alias配置；
• 添加rewrite规则，自动将不带斜杠的请求重定向到带斜杠的版本：

server {
 listen 123.456.78.90:80;
 # 重定向不带斜杠的/reportpwa到带斜杠的地址
 rewrite ^/reportpwa$ /reportpwa/ permanent;

 location /reportpwa/ {
   alias /home/pwa/dist/;
   try_files $uri $uri/ /reportpwa/index.html;
   index index.html index.htm;
 }
}

3. PWA打包时的基础路径配置错误 #

即使NGINX配置正确，如果你的PWA打包时没设置对应基础路径，浏览器会从网站根目录请求静态资源（比如/static/css/main.css），而非/reportpwa/前缀下，导致资源404，页面空白。

解决方法：

• 如果是Vue/React等框架，打包时指定publicPath：
  • Vue：在vue.config.js中添加publicPath: '/reportpwa/'
  • React：在package.json中添加"homepage": "/reportpwa/"
• 在index.html的<head>里手动添加基础路径标签：

<base href="/reportpwa/">

4. 查看NGINX日志定位具体错误 #

如果以上调整后仍有问题，直接看NGINX日志能快速找到根源：

• 访问日志默认路径：/var/log/nginx/access.log
• 错误日志默认路径：/var/log/nginx/error.log
• 实时查看错误日志的命令：

tail -f /var/log/nginx/error.log

如果看到大量404 Not Found的资源请求，基本可以确定是路径配置不匹配导致的。

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