小项目根目录放index.html即可，无需src/dist；中大型项目必须分离src（源码）和dist（构建产物），并规范路径引用与资源组织。
小项目别搞 src/dist，根目录放 index.html 就够用
单人维护、页面 ≤ 5 个、不写 Sass/ES6/模板语法的静态站，硬套“工程化结构”反而容易路径错乱。你双击打开 index.html 就该能跑，所有资源引用必须稳定。
-
index.html必须在根目录——这是 Web 服务器默认入口，挪到pages/里就得配重定向或改服务器配置 -
css/下只放main.css和reset.css，别建css/base/或css/v2/——没构建工具时，每多一层就多一个相对路径计算错误点 -
js/里只放main.js和utils.js，避免js/lib/dom.js这种嵌套——pages/about.html里写<script src="js/main.js"></script>会去查pages/js/main.js，不是你预期的根目录下那个 - 图片按用途分
icons/、banner/，但别超过两层，比如images/icons/social/twitter.svg已经难定位、难迁移 - 所有内部链接用相对路径：
pages/contact.html，不是/pages/contact.html——后者本地双击打开直接 404
中大型项目必须分 src 和 dist，否则改两行代码就要全局修路径
一旦开始用 Sass、ES6 模块、Nunjucks 模板或 Vite 构建，源码和上线文件混在一起就是定时炸弹：本地跑得通，构建后 CSS 路径全错；改一个颜色变量，要手动同步三处；别人接手第一件事是删掉整个目录重来。
-
src/存所有可编辑源码：src/html/index.njk、src/css/scss/main.scss、src/js/modules/nav.js -
dist/是构建产物，只含最终能上线的文件：index.html、css/main.css、js/main.js，禁止手动修改 -
public/存不参与构建的静态资源：public/favicon.ico、public/robots.txt，构建时原样复制进dist/，别丢进src/里——Webpack/Vite默认不处理src/下的非源码文件 - HTML 中所有资源引用必须用根相对路径：
<link rel="stylesheet" href="/css/main.css">，不是../css/main.css——前者以域名根为基准，后者依赖当前 HTML 文件位置，pages/about.html和blog/post.html的..层数不同，极易断裂
components/ 目录不能直接在浏览器里用 fetch() 加载
所谓“组件化”在无服务场景下只是个组织习惯，不是运行时能力。直接在浏览器里用 fetch() 加载 components/header.html 会触发 CORS，本地双击打开更会直接失败。
- 真要用组件，得靠构建时拼接（如
gulp-file-include）或服务端包含（如 PHPinclude、Nginx SSI） -
header.html、header.css、header.js三件套命名必须一致，否则脚本引用断裂 - 避免在
components/里用相对路径引用上级资源，比如../../css/base.css——移动组件目录时全挂 - 如果用
pages/home.html引用组件，路径要基于pages目录算，不是根目录
pages/ 页面共用同一份 JS，但初始化逻辑不能硬编码进 app.js
所有页面共用同一份 JS，但不同页面需要初始化不同模块（比如 contact.html 要加载表单验证，而 blog.html 要初始化代码高亮）。硬编码 <script src="js/app.js"></script> 会导致无效执行或重复绑定。
- 在
app.js开头加判断：if (document.body.id === 'contact-page') { initContactForm(); } - 或者用
data-module属性驱动：，再让 JS 自动扫描加载对应模块 - 别把页面专属逻辑塞进
app.js全局作用域，容易污染、难调试
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
