Vue SFC模板修改后触发Vite构建错误求助

1. 检查KirbyUp的Vue SFC配置约束 #

KirbyUp作为Kirby官方打包工具，对Vue单文件组件模板有特定规则：

• 部分版本的KirbyUp默认不支持模板的lang="html"属性，直接去掉该属性测试。
• Kirby面板字段的Vue组件模板必须只有一个根元素，如果新增<h2>后出现多个同级根节点（比如原根节点是<div>，新增的<h2>和它同级），会触发Vue编译错误，确认模板结构是否满足单根要求。

2. 查看详细构建错误日志 #

不要只停留在「ERROR Build failed」提示，往下翻找终端输出的具体报错内容：

• 如果是Unexpected token类错误，大概率是Vite的Vue插件版本与KirbyUp不兼容。Vite@4.5.3对应的@vitejs/plugin-vue建议用^4.5.0版本，检查项目package.json依赖，版本不符的话执行：

  npm install @vitejs/plugin-vue@4.5.0 --save-dev
  

• 如果是模板语法错误，比如未闭合标签、无效指令，仔细核对修改后的模板代码。

3. 清除缓存后重新构建 #

Vite和KirbyUp的缓存可能导致修改不生效或报错：

• 删除项目根目录的.vite和dist文件夹
• 执行强制清理缓存的构建命令：

  kirbyup build --force
  

4. 核对教程与工具版本匹配度 #

确认你使用的Kirby、KirbyUp版本和官方教程一致：

• 如果教程基于旧版KirbyUp（比如搭配Vite3），而你用了Vite4，可能存在配置差异。可以尝试降级Vite到教程指定版本，或查看KirbyUp最新文档调整配置。

内容的提问来源于stack exchange，提问作者Dan Gilmore