打包前应使用html-validate在构建前校验HTML源码，通过vite-plugin-html-validate插件在buildStart阶段同步执行，配置.include显式指定入口文件，失败则中断构建，确保符合W3C与可访问性规范。
打包前怎么检查 HTML 是否符合规范
HTML 质量控制不能等到上线才做，必须在打包前置阶段介入——否则 CI/CD 流水线里发现 <img> 缺 alt、button 没 type、或内联样式残留，修复成本就高了。
核心思路是：用静态分析工具在 npm run build 之前跑一次 HTML 校验，失败则中断构建。不依赖浏览器渲染，只校验源码结构。
- 推荐用
html-validate：支持自定义规则（比如强制aria-label）、可集成 Webpack/Vite 插件、规则集对标 W3C 和 axe-core - 避免用
tidy或老版validator.nuCLI：前者不检查可访问性，后者 HTTP 调用不稳定，不适合 CI - 配置文件必须放在项目根目录，命名为
.htmlvalidate.json，否则 Vite 插件默认找不到
如何让 html-validate 在 vite build 前自动触发
Vite 默认不提供 pre-build hook，得靠插件拦截 buildStart 阶段并同步执行校验——异步会错过构建时机。
实操上，直接用官方插件 vite-plugin-html-validate，但要注意三点：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 插件版本必须 ≥ 2.0.0，旧版不兼容 Vite 4+ 的
configResolved生命周期 - 在
vite.config.ts中要写成plugins: [htmlValidate({ include: ['src/**/*.html', 'index.html'] })]，路径不支持 glob 通配符以外的写法 - 若项目有多个入口 HTML（如多页应用），
include必须显式列出，插件不会自动扫描public/下的文件
常见误报和绕过方式是否安全
html-validate 对框架模板语法（如 Vue 的 <template>、React 的 JSX）默认报错，这不是 bug，是设计使然——它只处理最终输出的 HTML 字符串，不是编译前的源码。
解决方法只有两个，且必须选其一：
- 在构建后、打包前，用插件把生成的 HTML 文件（如
dist/index.html）丢给html-validate校验——此时已是纯 HTML，无语法干扰 - 若坚持校验源码（如
index.html里含<%= title %>），需手动配置parser: "html"并禁用涉及 DOM 结构的规则（如no-inline-style改为 warn 级别） - 绝对不要用
<!-- html-validate-disable -->全局关闭——这会让aria-*属性缺失类问题彻底漏掉
CI 环境下校验失败却没中断构建怎么办
典型现象：本地 vite build 会停在错误处，但 GitHub Actions 或 Jenkins 里构建照常通过。根本原因是 Node.js 子进程退出码未透传。
关键动作只有两个：
- 确保脚本命令是
npx html-validate --config .htmlvalidate.json src/index.html，而不是包裹在sh -c或bash -e里——后者可能吞掉非零退出码 - 在 CI 的
package.json中，把构建命令写成"build": "npm run validate:html && vite build"，用&&强制链式失败 - 如果用了自定义 shell 脚本触发构建，检查最后一行是否写了
exit ${?}，否则 Bash 默认返回 0
真正难搞的是动态生成的 HTML 片段（比如 CMS 注入的富文本），这部分没法靠静态校验覆盖，得靠运行时 document.querySelectorAll('[role]').forEach(...) 补检——但那是另一层的事了。
