
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 的语法正确性要求严格,它不仅是入口模板,更是构建流程的解析起点。











