Nginx部署静态网站常见问题根源在权限、路径和配置三处:需确认服务运行(systemctl status nginx)、上传至默认目录/var/www/html、设置正确属组(www-data)与权限(755)、前端history路由须配try_files $uri $uri/ /index.html;,且每次修改后必须nginx -t验证并reload。

直接扔进 /var/www/html 不一定能打开,常见 403、404、空白页,问题几乎都出在权限、路径、Nginx 配置三处,不是 HTML 本身有问题。
检查 Nginx 是否真在运行
很多人传完文件就开浏览器,结果打不开——其实 Nginx 根本没启动,或者压根没装。
- SSH 登录后执行
systemctl status nginx,确认状态是active (running) - 如果提示
Unit nginx.service could not be found,说明没装:Ubuntu/Debian 执行sudo apt install nginx,CentOS 执行sudo yum install nginx - 装完必须手动启动:
sudo systemctl start nginx,并设开机自启:sudo systemctl enable nginx - 别忘了开放端口:Ubuntu 上跑
sudo ufw allow 'Nginx Full',CentOS 检查firewalld是否放行 80 端口
上传位置和权限必须匹配默认配置
Nginx 默认只读 /var/www/html,且要求目录可被 www-data(Ubuntu)或 nginx(CentOS)用户访问。硬塞到 /home/user/my-site 或 /root 下,不改配置就永远 403。
- 用
scp传文件最稳:scp -r ./dist/* user@your-server-ip:/var/www/html/(注意末尾斜杠,表示“里面”) - 上传后立刻检查权限:
ls -l /var/www/应显示目录属主为root,但组为www-data;再查ls -ld /var/www/html,权限应为drwxr-xr-x(即 755) - 修正权限命令:
sudo chown -R $USER:www-data /var/www/html+sudo chmod -R 755 /var/www/html -
index.html必须在/var/www/html/下,不能在子目录里还指望直接访问根域名——否则就是 404
前端路由(history 模式)必须加 try_files
Vue、React、Astro 等构建的单页应用,启用 history 路由后,刷新 /about 页面会直接 404,因为 Nginx 默认只认物理文件,不转发路由请求。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记(深入)”;
- 编辑站点配置:
sudo nano /etc/nginx/sites-available/default(或你自己的 conf 文件) - 确保
location /块里有这行:try_files $uri $uri/ /index.html; - 别漏掉分号,也别写成
$uri /index.html(少一个$uri/会导致子目录请求失败) - 改完必须验证语法:
sudo nginx -t,成功后再重载:sudo systemctl reload nginx
静态资源路径写死会导致 404,尤其部署在子路径时
如果构建产物里 CSS/JS 路径是 /assets/main.js(绝对路径),但你的网站实际跑在 https://example.com/myapp/,那浏览器会去根目录找,而不是 /myapp/assets/,结果全是 net::ERR_ABORTED。
- 构建前检查框架配置:Vue CLI 用
publicPath,Vite 用base,Astro 用outputDir+base,设为"./"或相对路径 - 如果已部署且无法重构建,可在 Nginx 中用
location做前缀映射,例如:location /myapp/ { alias /var/www/myapp/dist/; },但 root 和 alias 行为不同,alias 末尾要带斜杠,root 不要 - 更简单的方法:全用相对路径(
css/style.css而非/css/style.css),构建工具通常支持
最容易被忽略的是:Nginx 配置改了不 nginx -t 验证,上传后不 chown 改属组,以及前端用了 history 模式却完全没配 try_files——这三点占线上 404/403 的 80% 以上。


















