服务器需运行http服务(如nginx/apache)并开放80/443端口,html5文件须置于web根目录(如/var/www/html),配置正确权限与路由重写规则,使用相对路径和https避免混合内容,修改后务必重载服务。

确认服务器有没有 HTTP 服务
没有 Web 服务,放再好的 HTML5 文件也打不开。常见情况是买了云服务器但只装了系统,没装 nginx 或 apache,甚至没开防火墙端口。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 用
ps aux | grep nginx或systemctl status apache2看服务是否在运行 - 没装就装一个,推荐轻量的
nginx:sudo apt install nginx(Ubuntu/Debian)或sudo yum install nginx(CentOS) - 检查 80 端口是否监听:
ss -tuln | grep :80,没输出说明服务没起来或端口被占 - 云厂商(如阿里云、腾讯云)还要去控制台安全组里放行 80 和 443 端口
把 HTML5 文件放到正确路径
nginx 默认网站根目录是 /var/www/html,apache 一般是 /var/www/html 或 /var/www/your-site。放错位置,浏览器访问会 404。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 别直接往
/root或/home/username里扔文件,HTTP 服务默认不读这些路径 - 用
sudo cp -r ./my-website/* /var/www/html/把本地构建好的静态文件拷过去 - 注意权限:确保
www-data(Ubuntu)或apache(CentOS)用户能读取文件,执行sudo chown -R www-data:www-data /var/www/html - 如果用了
index.html以外的入口(比如app.html),得改nginx.conf里的index指令
处理 HTML5 路由(history.pushState)刷新 404
用 Vue Router、React Router 或原生 history.pushState 做单页应用(SPA)时,直接访问 /about 会 404——因为服务器找不到这个物理路径。
支付宝账户登录ecshop插件简介: 先向支付宝申请支付接口,拿到合作身份者ID和安全检验码这两个东西。 把login整个文件夹传到服务器上ecshop安装所在的目录,如果路径不对可以会导致使用失败。 需要修改的文件:alipay_config.php return_url.php可以修改第30行的邮箱域名为你的网站域名。 别的不用改,否则会导致无法使用。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 对
nginx,在server块里加这段配置:location / {<br> try_files $uri $uri/ /index.html;<br>} - 对
apache,确保.htaccess在根目录且启用mod_rewrite,内容为:RewriteEngine On<br>RewriteBase /<br>RewriteRule ^index\.html$ - [L]<br>RewriteCond %{REQUEST_FILENAME} !-f<br>RewriteCond %{REQUEST_FILENAME} !-d<br>RewriteRule . /index.html [L] - 别漏掉
try_files最后那个/index.html,少斜杠或写成index.html都会失效
HTTPS 和资源路径别踩坑
本地双击打开 index.html 能跑,一上服务器就报 Mixed Content 或资源 404,大概率是路径写死了。
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 所有 CSS、JS、图片路径用相对路径,比如
./css/style.css,别用file:///或绝对本地路径 - 避免硬编码
http://,尤其当开了 HTTPS 后,http://api.example.com会被浏览器拦截。统一用协议相对地址://api.example.com,或更推荐全用https:// - 检查浏览器开发者工具的
Console和Network标签页,看具体哪个请求失败,状态码是不是404或blocked:mixed-content - 上线前清一次浏览器缓存,或者用无痕窗口测试,避免旧缓存掩盖路径问题
最常卡住的地方不是技术多难,而是查半天发现 nginx 没重启、index.html 权限不对、或者路径里多了一个点。每次改完配置,记得 sudo nginx -t && sudo systemctl reload nginx,别只改不重载。









