HTML模板如何组织目录结构_HTML模板工程化开发管理-html教程-PHP中文网

html模板目录结构需匹配工具链与需求，而非盲目套用标准：src/与public/须严格区分，组件化需构建时合并或服务端包含，assets/应按类型分设子目录，结构决定后续自动化流程成败。

html模板如何组织目录结构_html模板工程化开发管理

HTML模板的目录结构不是“怎么好看怎么来”，而是取决于你用不用构建工具、要不要复用组件、有没有多语言或微前端需求。不加区分地套用“标准结构”，反而会让后续改页面、加功能、配CI/CD变得更麻烦。

用 Vite/Webpack 时，`src/` 和 `public/` 必须严格分开

很多人把 favicon.ico、robots.txt 直接丢进 src/，结果构建后找不到——因为这些文件不会被编译器处理，必须放 public/ 才会原样复制到 dist/。

src/html/ 存 EJS/Nunjucks 模板（支持），不是纯 HTML
src/css/scss/ 放 Sass 源码，dist/css/ 是构建后生成的 CSS，别手动改它
public/favicon.ico、public/manifest.json 这类资源，路径写成 /favicon.ico（以 / 开头），否则开发服务器可能 404
如果用了 vite-plugin-html 注入环境变量，模板里写 <title></title>，别漏掉 VITE_ 前缀

纯静态 HTML 模板，`components/` 要配合服务端包含或构建时拼接

直接在浏览器里用 fetch() 加载 components/header.html 会触发 CORS，本地双击打开更会直接失败。所谓“组件化”在无服务场景下只是个组织习惯，不是运行时能力。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

真正能落地的方式只有两种：用 gulp-file-include 构建时合并，或后端 Nginx/Apache 启用 ssi 指令（ ）
components/header/ 下必须有 header.html、header.css、header.js 三件套，命名不一致会导致脚本引用断裂
避免在 components/ 里用相对路径引用上级资源，比如 ../../css/base.css —— 移动组件目录时全挂
如果用 pages/home.html 引用组件，路径要基于 pages 目录算，不是根目录

多页面 HTML 项目，`pages/` 里的 HTML 不该直接引用 `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 全局作用域，容易污染、难调试
Webpack/Vite 用户可用 import('./modules/contact.js').then(...) 动态导入，减小首屏体积

`assets/` 下的 `images/` 和 `icons/` 别混着放

图标和图片的使用方式、压缩策略、DPR 适配要求完全不同。混在一个文件夹里，后期加 WebP 支持、SVG sprite 或响应式 <picture></picture> 时会反复翻车。

assets/images/ 存 banner.jpg、avatar.png 这类内容图，走 <img src="..."> 或 CSS background-image
assets/icons/ 存 logo.svg、close.svg 这类装饰/功能图标，优先用内联 SVG 或 <use href="#icon-close"></use>
assets/fonts/ 必须放 public/（字体是跨域敏感资源），且 @font-face 的 src 路径要和部署路径一致，比如 url('/fonts/inter.woff2')
如果用了 srcset，images/ 下就得有 banner@2x.jpg 和 banner.webp，别指望构建工具自动补全

最常被忽略的是：HTML 模板结构一旦定型，就决定了后续所有自动化流程的输入形态。比如你选了 Nunjucks 模板但没配好 include 路径解析规则，CI 上生成的页面就会缺 header；又比如把 SVG 图标当普通图片扔进 images/，结果构建时被当成位图压缩，矢量特性全丢。结构不是越“规范”越好，而是要和你的工具链、部署方式、团队协作节奏咬合得上。