Vite 开发服务器报错:HTML 属性间缺少空格导致解析失败

vite 启动时因 `index.html` 中 html 标签属性间缺失空格(如 `rel="stylesheet"href="..."`)触发 parse5 解析错误,需严格遵循 html 语法规范修复。

在使用 Vite 搭建的项目(尤其是集成 Tailwind CSS 的前端应用)中,运行 npm run dev 时若遇到如下错误:

Internal server error: Unable to parse HTML; parse5 error code missing-whitespace-between-attributes

这并非 Vite 或 Tailwind 的配置问题,而是 index.html 文件违反了 HTML 标准语法——具体表现为:两个 HTML 属性之间缺少必需的空白字符(空格或换行)

查看你提供的 index.html 片段:

⚠️ 注意:rel="stylesheet" 和 href="..." 之间没有空格,即写成了 "stylesheet"href=,这会导致 HTML 解析器(Vite 内部使用的 parse5)无法正确切分属性,从而抛出 missing-whitespace-between-attributes 错误。

✅ 正确写法必须在属性间添加至少一个空格

? 补充说明:HTML 规范要求属性名之间必须由空白符(空格、制表符、换行)分隔。即使浏览器在生产环境可能“宽容”地容错渲染,但 Vite 的开发服务器使用严格的 HTML 解析器(parse5)进行预处理(如注入 HMR 脚本、处理 等),因此会直接报错并中断启动。

? 其他易被忽略的类似错误示例:

  • → 应为
  • → 应为

    ✅ 推荐实践:

    • 编辑器启用 HTML 格式化(如 VS Code 的 Prettier + ESLint with eslint-plugin-html)
    • 在保存时自动修复(配置 "editor.formatOnSave": true)
    • 使用 vite-plugin-checker 或 html-validate 在开发阶段静态检查 HTML 语法

    修复后重新运行 npm run dev,服务即可正常启动。记住:Vite 对 index.html 的语法正确性要求严格,它不仅是入口模板,更是构建流程的解析起点。