宝塔部署 Vue 项目：PC 进子目录后页面白屏，assets 全 404？Nginx 配置一次讲透

用户86723931081
4 阅读3分钟

宝塔部署 Vue 项目：PC 进子目录后页面白屏，assets 全 404？Nginx 配置一次讲透

场景：同一站点、同一端口，PC 管理端在 /，H5 在 /h5/，Java API 走 /admin-api/、/app-api/。宝塔面板 + Nginx。

一、现象

1. H5 打不开

把 PC 静态资源挪到 pc/ 后，Nginx 只改了：

root /www/wwwroot/cstj/pc;

  • https://域名:442/ → PC 可能正常
  • https://域名:442/h5/ → 404 Not Found

2. PC 白屏、一直转圈

补上 location /h5/ 后，H5 好了，但 PC 又出现：

  • 页面只有「城市体检系统」+ 加载动画
  • 控制台一堆 404：

GET /assets/index-xxx.js 404

GET /assets/index-xxx.css 404

GET /logo.png 404

index.html 能返回，JS/CSS 全挂，应用起不来。

二、目录结构（先对齐认知）

/www/wwwroot/cstj/

├── yudao-server.jar # Java 后端

├── backup/

├── pc/ # PC 管理端（Vue 打包产物）

│ ├── index.html

│ ├── logo.png

│ ├── favicon.ico

│ └── assets/ # 必须有！缺了就是白屏

│ ├── index-xxxxx.js

│ └── index-xxxxx.css

└── h5/ # H5 采集端

└── index.html

访问关系：

URL 路径应对目录
/pc/
/assets/*pc/assets/
/h5/h5/
/admin-api/反代 127.0.0.1:48080
/app-api/反代 127.0.0.1:48080

三、原因 1：只改 root，H5 必 404

root 表示：文件路径 = root + URI。

配置 root /www/wwwroot/cstj/pc 时，访问 /h5/ 实际查找：

/www/wwwroot/cstj/pc/h5/index.html ❌ 不存在

真实路径是：

/www/wwwroot/cstj/h5/index.html ✅

结论：PC 进子目录后，必须为 /h5/ 单独写 location，用 alias 指到 h5/。

location ^~ /h5/ {

alias /www/wwwroot/cstj/h5/;

index index.html;

try_files uriuri uri/ /h5/index.html;

}

  • root：给 PC 根路径 /、/assets/ 用
  • alias：给子路径 /h5/ 用，避免路径叠成 h5/h5/
  • ^~：优先匹配，避免被后面正则 location 抢走

四、原因 2：正则 location 抢走 /assets/*.js（白屏元凶）

很多人宝塔默认配置里有：

location ~ .*.(js|css)?$

{

expires 12h;

...

}

问题在于：

  1. 请求 /assets/index-xxx.js 会命中这条正则
  2. 该 location 里没有 root / alias
  3. Nginx 找不到文件 → 404
  4. index.html 在 location / 里能返回，所以「有壳子、没逻辑」

这是 PC 白屏、assets 全 404 最常见原因之一，和「文件没上传」要区分开。

正确做法

  • 删掉 或不要对全局 js/css 用无 root 的正则
  • 在 server 级 写一次 root
  • 用 ^~ /assets/ 明确处理 PC 打包资源

server {

root /www/wwwroot/cstj/pc; # server 级，给 /、/assets/、/logo.png 用

location ^~ /assets/ {

expires 12h;

access_log off;

}

location / {

try_files uriuri uri/ /index.html;

}

}

五、原因 3：手动挪目录只拷了 index.html

若只把 index.html、logo.png 放进 pc/，没拷 assets/，同样会白屏。

服务器自检：

ls -la /www/wwwroot/cstj/pc/index.html

ls /www/wwwroot/cstj/pc/assets/ | head

assets 不存在或为空 → 重新执行前端构建并整包部署 dist 到 pc/，不是改 Nginx 能解决的。

六、完整 Nginx 配置（可直接粘贴宝塔）

顺序： API 反代 → H5 → PC 静态 assets → PC 根 / → 安全规则 → 图片缓存

不要再保留「无 root 的 location ~ .*.(js|css)?$」。

server

{

listen 3003;

listen 442 ssl;

listen 442 quic;

listen [::]:442 ssl;

listen [::]:442 quic;

http2 on;

listen [::]:3003;

server_name www.hncstj.top hncstj.top 106.53.175.247;

index index.html index.htm default.htm default.html;

PC 默认根（/assets/、/logo.png 等）

root /www/wwwroot/cstj/pc;

SSL、证书申请等按宝塔原样保留...

include /www/server/panel/vhost/nginx/well-known/106.53.175.247.conf;

ssl_certificate /www/server/panel/vhost/cert/106.53.175.247/fullchain.pem;

ssl_certificate_key /www/server/panel/vhost/cert/106.53.175.247/privkey.pem;

... 其余 SSL 配置省略，粘贴时保留你面板里原有 SSL 段 ...

include /www/server/panel/vhost/rewrite/html_106.53.175.247.conf;

① 后端 API（必须在静态正则之前）

location /admin-api/ {

proxy_pass http://127.0.0.1:48080/admin-api/;

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;

}

location /app-api/ {

proxy_pass http://127.0.0.1:48080/app-api/;

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;

}

② H5

location ^~ /h5/ {

alias /www/wwwroot/cstj/h5/;

index index.html;

try_files uriuri uri/ /h5/index.html;

}

③ PC 打包资源（避免被 js/css 正则抢走）

location ^~ /assets/ {

expires 12h;

access_log off;

}

④ PC 根路径

location / {

try_files uriuri uri/ /index.html;

}

⑤ 图片缓存（不要对 js/css 写无 root 的正则）

location ~ .*.(gif|jpg|jpeg|png|bmp|swf|ico|webp)$ {

expires 30d;

access_log off;

}

access_log /www/wwwlogs/106.53.175.247.log;

error_log /www/wwwlogs/106.53.175.247.error.log;

}

粘贴到宝塔时：SSL、well-known、error_page 等段落请保留你面板里原有内容，只按上面思路调整 location 部分即可。

七、location 匹配顺序（避坑）

Nginx 大致规则：

写法含义
location ^~ /h5/前缀匹配，命中后不再走正则
location ^~ /assets/同上，保护打包资源
location /普通前缀，作 PC 兜底
`location ~ .*.(jscss)?$`正则，容易误伤 /assets/*.js

反代 /admin-api/、/app-api/ 也要写在「会干扰静态资源的正则」之前。

八、部署后自检清单

1. 配置语法

nginx -t

2. 重载

nginx -s reload

3. 文件是否齐全

ls -la /www/wwwroot/cstj/pc/index.html

ls /www/wwwroot/cstj/pc/assets/ | head

ls -la /www/wwwroot/cstj/h5/index.html

浏览器验证：

地址预期
https://域名:442/PC 登录页正常
https://域名:442/logo.png200
https://域名:442/assets/某个.js200
https://域名:442/h5/H5 正常
F12 Network接口走 /admin-api/、/app-api/

仍异常时，可临时注释伪静态：

#include /www/server/panel/vhost/rewrite/html_106.53.175.247.conf;

Vue 使用 Hash 路由 时，通常不需要再把所有请求 rewrite 到 index.html；多余规则可能干扰 /assets/。

九、小结

问题原因处理
/h5/ 404root 指向 pc，找不到 h5location ^~ /h5/ + alias
PC 白屏、assets 404正则 location ~ js/css 无 root删除该正则，server 级 root + ^~ /assets/
仍有 404pc/assets 未部署重新构建并整包上传 dist
接口 404缺反代补 /admin-api/、/app-api/

记住三句话：

  1. PC 用 root 在 pc/，H5 用 alias 在 h5/
  2. 别让无 root 的 js/css 正则碰 /assets/
  3. 白屏先查 pc/assets/ 有没有文件，再查 Nginx

按这套配置，同一域名、同一端口下 PC + H5 + Java API 可以稳定共存。

标签： Nginx Vue 前端部署 宝塔 404 alias root Vite 白屏

avatar
文章
阅读
粉丝