Vue SPA 项目在 Amazon S3 部署小技巧

Vue 通过 vue-router 实现的 SPA 项目部署在 Amazon S3 bucket 中，通过 Static Website Hosting 设置 Index Document 为 index.html，如果 vue-router 使用 history 模式，那么在浏览器通过路由路径访问非根路由路径时，会返回 404 错误，如何解决这个问题呢，在 stackoverflow 上有一个 高负分 的答案，其实是正确答案（rio 心疼）。
不记得当时是怎么于千万个问题中找到那个问题并发现这个被那么多不思考不实践者打负分的答案了，当时也没有保存书签，因此原答案已经找不到了，这里记录下方法及原理，供遇到同样问题的同学参考。

解决方案很简单，一看就懂：

打开 S3 控制台，选择相应的 bucket，进入属性设置页面，然后在Static Website Hosting 里将 Error Document 同样设置为 index.html，然后保存即可。

原理是，当通过路由路径访问非根路由路径时，S3 会发现文件不存在，因此会携带路径访问该 Error Document，因此就访问到了正确的文件及路由。

美中不足的是，使用该方法访问非根路由路径时，返回的 http response code 是 404，虽然不影响路由页面的正常显示，但如果是使用 AJAX 访问，需要添加不合常规的异常处理，因此，是否有完美解决方案呢？

答案是有的。如果设置了 Amazon 的 CloudFront CDN 服务，还可以通过 CloudFront 的 Error Pages 设置来达到同样的跳转效果。在 CloudFront 设置页面的 Error Pages 选项卡中，添加一个 Custom Error Response，具体设置如下：

这样一来，当通过路由路径访问非根路由路径时，不但会携带路径访问 index.html，还会将 http response code 由 404 改为 200。

完美！