最稳静态页面是手写纯html文件，所有资源用相对路径，禁用fetch加载本地json，变量用template literals注入，避免ssi和伪静态框架。
直接用 html 文件写死内容最稳
静态页面本质就是浏览器能直接打开的 .html 文件，不依赖服务端渲染或构建工具。如果你只是要一个单页展示、文档说明、产品落地页，最可靠的方式就是手写一个纯 index.html——没有编译、没有依赖、没有缓存失效问题。
常见错误现象：localhost:3000 能跑，但双击打开 index.html 报 net::ERR_FILE_NOT_FOUND（路径用相对 URL 加载 JS/CSS 时）；或者用 fetch('./data.json') 直接失败（本地文件协议下禁止跨源请求）。
- 所有资源路径优先用相对路径，且确保和 HTML 同目录或子目录结构一致
- 避免在纯静态页里用
fetch或XMLHttpRequest加载本地 JSON——浏览器会拦截，改用内联<script>const data = { ... };</script> - 图片、CSS、JS 都放进同一目录或明确子目录（如
./css/style.css），别依赖构建工具生成的哈希名
用 template literals 拼接动态块（适合少量变量）
当需要在静态页里插几个变量（比如标题、版本号、作者名），又不想引入模板引擎，JavaScript 的 template literals 是轻量解法。它不是服务端渲染，而是在页面加载后用 JS 注入 DOM，适用于内容基本固定、仅局部可变的场景。
使用场景：公司内部工具页、部署后的环境信息页、带版本号的文档首页。
- 把变量提前定义在
<script></script>块顶部，比如const version = 'v2.1.0'; const title = 'API 文档'; - 用
document.getElementById('title').innerHTML = `${title} ${version}`;更新对应元素 - 注意 XSS 风险：如果变量来自 URL 参数或用户输入，必须用
textContent替代innerHTML，或做 HTML 转义 - 不要用它渲染整页结构——DOM 操作多了会闪屏，也不利于 SEO
别碰 server-side includes（SSI）除非你真在 Apache/Nginx 上托管
server-side includes 看起来像静态方案，实际是服务器功能。本地双击打开 .shtml 文件时，<!--#include file="header.html" --> 完全不生效，浏览器只会原样显示注释。
性能与兼容性影响：启用 SSI 需配置 Web 服务器（Apache 要开 Includes，Nginx 要配 shtml 类型 + ssi on），还会让每个请求多一次文件读取，对静态资源缓存也不友好。
- 如果你只是本地预览或用 GitHub Pages / Vercel 部署，SSI 不可用，直接放弃
- 真要用组件化，选前端方案：比如用
import+esbuild --bundle合并多个 HTML 片段，或写个简单脚本拼接字符串 - GitHub Pages 默认不支持 SSI，Vercel 更是完全不支持——别白费劲配
.htaccess
preact 或 vue 的“静态导出”模式容易误判为纯静态
很多框架宣传“静态导出”，比如 preact build 或 vuepress build，结果生成一堆 JS 文件和 index.html。它确实不依赖后端，但本质是 SPA：首屏空白、依赖 JS 执行才渲染、SEO 友好度取决于是否开了 SSR/SSG。
容易踩的坑：以为扔到 Nginx 就算“静态”，结果发现搜索爬虫抓不到内容，或者 JS 报错导致整个页面白屏。
- 检查生成的
index.html是否含真实文本内容——如果只有<div id="app"></div>，那就不是真静态 - 若需 SEO 或离线可用，优先选支持 SSG 的工具（如
astro build、11ty），它们默认把内容直出到 HTML 中 - 用
curl -s http://localhost:5000 | grep "<h1>"</h1>快速验证：如果返回空，说明没直出
真正静态的关键不在“有没有服务器”，而在“HTML 文件本身是否已包含全部可见内容”。其他都是妥协或过渡方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
