components/目录不能直接用fetch加载本地html文件，因浏览器禁止跨域读取本地文件且静态场景无服务端包含能力；必须依赖构建工具（如vite-plugin-html）构建时拼接，或后端模板引擎服务端渲染include。
components/ 目录不能直接在浏览器里用 fetch() 加载
本地双击打开 HTML 文件，或服务端没配 CORS，fetch("components/header.html") 会直接失败——浏览器禁止跨域读取本地文件，且纯静态场景下没有服务端包含能力。所谓“组件化”只是组织习惯，不是运行时特性。
- 想复用
header.html，必须靠构建工具（如vite-plugin-html、gulp-file-include）在构建时拼进去，或后端模板引擎（如 EJS/Nunjucks）在服务端渲染时include - 别在
components/header.html里写../css/base.css这种相对路径——组件挪动位置，样式就断 - 如果页面在
pages/about.html，引用组件要基于pages/目录算路径，比如../../components/header.html，而不是假设从根目录开始
组件命名必须与引用路径严格一致
gulp-file-include 这类工具依赖文件名匹配：它找 header.html，你就不能只放 Header.html 或 header-template.html；同时配套的 header.css 和 header.js 缺一不可，否则脚本加载断裂、样式丢失。
- 推荐统一用小写字母 + 中划线：
user-card.html、nav-bar.html，避免大小写敏感问题（尤其部署到 Linux 服务器） - 别用
ad-banner、gg-header这类名字——广告拦截插件可能直接屏蔽对应 DOM 节点 - 组件内资源引用一律用根相对路径：
/css/components/user-card.css，不是./user-card.css
src/components/ 和 public/components/ 完全不是一回事
用了 Vite/Webpack 就必须分清：只有 public/ 下的文件才会原样复制进 dist/；src/components/ 是源码，得靠构建插件处理，否则根本不会出现在最终产物里。
-
public/components/放的是“静态就绪”的 HTML 片段，适合纯静态站点配合服务端包含（SSI）使用 -
src/components/放的是带模板语法的源文件（如header.njk），需要构建时编译注入，不能直接被浏览器请求 - 误把
favicon.ico放进src/，构建后就丢了——它必须在public/才能进dist/
多页面项目里 components/ 的作用范围容易超界
一个 contact.html 需要表单验证逻辑，blog.html 需要代码高亮，但它们共用同一份 main.js。组件目录本身不解决模块初始化问题，得靠页面级条件判断或构建时按需注入。
- 别让所有页面都无差别加载
components/chat-widget.js，首页不需要，却拖慢加载速度 - 推荐在页面模板里用环境变量控制：
<script src="/js/contact-form.js"></script> - 如果用 Vite，配合
vite-plugin-html注入VITE_PAGE_NAME，再用 JS 动态 import 对应模块
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
