直接用ssi实现html模块化可行但需服务器端解析,浏览器不处理;apache需启用mod_include、注册.shtm类型并开放目录权限;nginx需显式配置ssi on和ssi_types;tomcat需privileged=true且完整注册ssiservlet;ssi存在本地无法预览、不支持传参、样式无隔离、无热更新等开发体验缺陷。

直接用 SSI 实现 HTML 模块化是可行的,但必须满足服务器端解析条件——浏览器本身完全不处理 <!--#include -->,它只是注释;没配好 SSI 的服务器会原样返回这条注释,页面里就什么也不显示。
Apache 中 SSI 必须打开 mod_include 并设置 .shtml 类型
很多开发者以为改了 httpd.conf 就完事,结果页面空白。核心漏点是:mod_include 模块未启用 + 文件类型未注册 + 目录权限未放开。
-
LoadModule include_module modules/mod_include.so这行必须取消注释(Windows 下路径可能含so或dll) -
AddType text/html .shtml和AddOutputFilter INCLUDES .shtml缺一不可;若想让.html也生效,得加AddOutputFilter INCLUDES .html,但会拖慢所有 HTML 响应速度 -
Options +Includes要写在对应目录的<directory></directory>块里,不是全局配置就能生效;.htaccess 里加这句也行,但需确保AllowOverride Options
Nginx 开启 SSI 需显式启用且注意 ssi_type
Nginx 默认关闭 SSI,且行为比 Apache 更严格:不设 ssi_types 就算开了 ssi on,<!--#include --> 也不会被解析。
- 在
location或server块中必须写:ssi on;+ssi_types text/html; -
ssi_silent_errors off推荐打开,否则包含失败时页面静默丢内容,极难排查 -
<!--#include file="header.html" -->中的file是相对当前文件路径的,不能跨出 document root;virtual才支持绝对路径(如/includes/footer.html)
Tomcat 配置 SSI 容易卡在 privileged 和 servlet 注册
Tomcat 的 SSI 支持是可选组件,7+ 版本默认不启用,且需要两处关键配置联动,缺一不可。
-
context.xml中的<context privileged="true"></context>必须存在,否则 SSIServlet 不会被加载 -
web.xml中的<servlet></servlet>和<servlet-mapping></servlet-mapping>都要完整配置,尤其<url-pattern>*.shtml</url-pattern>这一行不能漏 - SSI 文件扩展名必须是
.shtml(或你自定义的映射),Tomcat 不支持对.html自动触发 SSI 解析 - 中文路径或文件名需确认
inputEncoding和outputEncoding均设为UTF-8,否则 include 内容乱码
SSI 模块化真正的成本不在配置,而在开发体验断层
它确实零构建、零 JS、零后端逻辑,但代价是:无法本地预览、不支持传参、样式无作用域、热更新失效。
- 本地双击打开 HTML 文件,
<!--#include -->就是纯注释,不会渲染任何内容——必须走 HTTP 服务 - 没法像组件那样传
title="首页",所有动态内容得靠 CGI/环境变量,或硬编码在被包含文件里 - 被包含的
footer.html里的 CSS 类名,会和主页面全局冲突;没有 Shadow DOM 或 scoped style 隔离机制 - 修改一个
header.html,必须手动刷新整个页面才能看到效果,无法 HMR
如果项目已用 Vite/Webpack,强行上 SSI 反而增加部署复杂度;真要低成本,不如用 html-loader + data-props 注入,至少开发时能跑通。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











