SvelteKit执行npm run dev报错src/app.html不存在但文件实际存在如何解决

常见触发原因 #

• 文件名大小写不匹配：Windows 系统本身对文件名大小写不敏感，但 SvelteKit 的配置校验逻辑为大小写敏感，若实际文件命名为App.html、APP.html等存在大小写差异的名称，系统可识别到文件但 SvelteKit 会判定不存在
• 自定义路径配置错误：若你在svelte.config.js中修改了files.template配置项，指向的路径和实际app.html的存放路径不符就会触发报错
• 文件后缀被隐藏：Windows 系统默认开启「隐藏已知文件类型的扩展名」设置，可能你实际创建的文件是app.html.txt，表面显示为app.html但实际后缀不符合要求
• 命令执行目录错误：执行npm run dev的工作目录不是 SvelteKit 项目的根目录，导致项目查找src路径时从当前命令执行目录开始计算，无法匹配到实际文件
• 读取权限不足：当前系统用户没有src目录或者app.html文件的读取权限，SvelteKit 无法读取文件内容就会判定文件不存在

修复方案 #

按照以下顺序逐一排查即可：

1. 检查文件名拼写和大小写，确认src目录下的文件确实为全小写的app.html，无大小写差异
2. 关闭系统的隐藏后缀设置，确认文件的实际后缀为.html，不是.txt或其他格式
3. 打开svelte.config.js核对配置，若存在files.template配置项，确认其指向的路径和app.html实际存放路径一致；如果不需要自定义模板路径，可以直接删除该配置项使用默认规则
4. 确认终端执行npm run dev时的工作目录为项目根目录（根目录下需存在package.json、svelte.config.js等核心配置文件）
5. 检查文件读取权限：Windows 下可右键文件查看属性中的安全标签，确认当前用户有可读权限；Linux/macOS 下可执行chmod +r src/app.html赋予读取权限
6. 若以上排查均无问题，可删除node_modules文件夹和项目下的package-lock.json/pnpm-lock.yaml等锁文件，重新执行npm install安装依赖后再启动项目

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