Svelte/Sapper应用部署到Heroku后出现404错误解决方案求助

问题核心原因 #

你遇到404的根本原因是Sapper构建产物路径和生产启动配置不匹配，以及对Sapper构建产物的类型认知错误：

• Sapper v0.27版本执行sapper build后，产物默认输出到__sapper__/build目录，你start脚本指定的build目录不存在，静态服务访问空目录自然返回404
• sapper build生成的是带Node服务端逻辑的服务端渲染产物，直接用纯静态文件服务serve运行不符合Sapper的原生设计要求
• 你本地运行正常是因为执行的是npm run dev走Sapper内置的开发服务，没有走你配置的生产启动命令，所以没暴露出配置错误

解决方案 #

方案1：保留服务端渲染能力（推荐）

适配Sapper原生运行逻辑，直接启动内置的Node服务：

• 修改package.json中的start脚本：

"start": "node __sapper__/build"

• 检查项目根目录的.gitignore文件，删除__sapper__相关的忽略规则
• 提交代码重新推送到Heroku即可生效

方案2：改为纯静态站点部署

如果你不需要服务端渲染能力，可以导出纯静态产物后用serve运行：

• 修改package.json中的heroku-postbuild和start脚本：

"heroku-postbuild": "run-p export",
"start": "serve -s __sapper__/export"

• 同样确认.gitignore中没有__sapper__的忽略规则，提交代码推送即可

本地验证方法 #

部署前可以在本地先验证配置正确性：

• 采用方案1：本地依次执行npm run build、npm start，访问本地服务确认所有页面正常加载
• 采用方案2：本地依次执行npm run export、npm start，访问本地服务确认所有页面正常加载

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