AWS Amplify手动部署VueJS 2应用遇Source Map加载错误求助

问题根源 #

这些错误的本质是：浏览器请求.js.map源映射文件时，服务器返回的不是预期的JSON格式源映射，而是你的应用首页（<!doctype>开头的HTML）。这说明请求的.map文件不存在，触发了SPA的路由 fallback（404时返回index.html），导致浏览器把HTML当成JSON解析报错。

分步解决建议 #

1. 直接关闭Source Map（最快解决）

如果生产环境不需要源映射（仅用于调试），直接在项目根目录的vue.config.js中添加配置：

module.exports = {
  productionSourceMap: false
}

重新构建部署后，编译后的JS文件不会再附带sourceMappingURL注释，浏览器也就不会发起这些无效请求了。

2. 若需要保留Source Map

• 检查本地构建产物：执行npm run build后，查看dist/js目录下是否存在报错信息中对应的.map文件（比如899.5b9eab10.js.map）。如果本地没有，需要把productionSourceMap设为true重新构建。
• 检查部署流水线：
  • 确认打包dist目录时没有排除.map文件；
  • 登录S3控制台查看js目录，确认所有.map文件都已正确上传；
  • 检查.map文件的权限，确保和对应的.js文件一致（通常为公开可读）。
• 验证文件可访问性：直接在浏览器地址栏访问某个报错的.map文件URL，确认返回的是JSON格式的源映射，而非HTML页面。

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