HTML5网页无需编译,发布即文件传输;Linux/macOS常用rsync增量同步,Windows可用内置scp或pscp,跨平台推荐lftp;切勿用本地开发服务器替代生产环境,须确保资源路径为相对路径或正确配置base/publicPath。

HTML5 网页本身不需要“编译”或“构建”,发布就是把文件放到能被 HTTP 访问的地方;所谓“命令行发布”,其实是你本地用工具(如 scp、rsync、ftp 或 CI 脚本)把文件传到服务器,不同系统只是命令语法和默认工具略有差异,不是 HTML5 本身的限制。
Linux/macOS 下用 rsync 推送最稳
这是生产环境最常用的方式:增量同步、断点续传、支持排除临时文件。
-
rsync -avz --delete ./dist/ user@host:/var/www/html/:推送./dist/目录全部内容到远程 Nginx/Apache 根目录 - 注意
--delete会删掉目标端多余文件,上线前先试加--dry-run - macOS 默认没装
rsync(旧版 macOS 有,新版可能需brew install rsync) - 路径末尾的
/很关键:./dist/表示同步内容,./dist(无斜杠)会把整个dist目录复制进去
Windows 下用 scp 或 pscp 更直接
PowerShell 默认不带 scp,但 Win10 1809+ 已内置 OpenSSH 客户端,启用后可用原生命令。
- 先确认:运行
Get-WindowsCapability -Online | ? Name -like 'OpenSSH.Client*',若显示 “NotPresent”,需执行Add-WindowsCapability -Online -Name OpenSSH.Client~~~~0.0.1.0 - 启用后直接用:
scp -r .\dist\ user@host:/var/www/html/(注意 Windows 路径用反斜杠,但scp仍认正斜杠) - 若失败,换
pscp(PuTTY 工具集):pscp -r -pw "password" .\dist\* user@host:/var/www/html/ - Windows 对
~路径展开不敏感,别写~/public_html,老实用绝对路径
跨平台通用:用 ftp 命令要特别小心
原生 ftp 客户端不支持密码直传(有安全警告),且不同系统行为不一致,仅适合临时调试。
立即学习“前端免费学习笔记(深入)”;
- Linux/macOS 的
ftp默认 passive 模式,部分 FTP 服务器要求主动模式,需手动ftp> passive切换 - Windows 的
ftp不支持-P指定端口,端口非 21 时基本不可用 - 更可靠的做法是写个简单脚本:
lftp -c "open ftp://user:pass@host; mirror -R ./dist /public_html"(需提前apt install lftp或brew install lftp) -
ftp传输 HTML/CSS/JS 一定要用 ASCII 模式(ftp> ascii),否则换行符错乱可能导致 JS 报错Uncaught SyntaxError: Invalid or unexpected token
别把本地开发服务当发布——python -m http.server 只能本地看
这个命令起的是纯文件服务器,没 HTTPS、没压缩、没缓存头、没反向代理能力,外网无法访问,也不抗并发。
-
python3 -m http.server 8000绑定在127.0.0.1,连本机局域网其他设备都打不开 - 想让局域网访问?得加
--bind 0.0.0.0:8000,但依然没防盗链、没 Gzip、没Cache-Control - 真正发布必须走 Nginx、Apache、Cloudflare Pages、Vercel 或 GitHub Pages 这类带静态托管能力的服务
- 如果你用
npm run serve(Vue CLI)或gatsby develop,那更是开发专用热更新服务,绝对不能当生产服务器用
最容易被忽略的一点:HTML5 页面里所有资源路径(src、href、fetch 地址)是否用了相对路径?如果写死 http://localhost:3000/api/ 或 /api/(根路径),部署到子目录(比如 https://example.com/myapp/)就会 404。发布前务必检查 base 标签和构建工具的 publicPath 配置。










