博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue SPA 项目在 Amazon S3 部署小技巧
阅读量:6978 次
发布时间:2019-06-27

本文共 855 字,大约阅读时间需要 2 分钟。

Vue 通过 vue-router 实现的 SPA 项目部署在 Amazon S3 bucket 中,通过 Static Website Hosting 设置 Index Document 为 index.html,如果 vue-router 使用 history 模式,那么在浏览器通过路由路径访问非根路由路径时,会返回 404 错误,如何解决这个问题呢,在 stackoverflow 上有一个 高负分 的答案,其实是正确答案(rio 心疼)。

不记得当时是怎么于千万个问题中找到那个问题并发现这个被那么多不思考不实践者打负分的答案了,当时也没有保存书签,因此原答案已经找不到了,这里记录下方法及原理,供遇到同样问题的同学参考。

解决方案很简单,一看就懂:

clipboard.png

打开 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,具体设置如下:

clipboard.png

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

完美!

转载地址:http://ouypl.baihongyu.com/

你可能感兴趣的文章
Linux下显示硬盘空间的两个命令
查看>>
What’s new: Windows Phone 7 与 Windows Phone 6.5功能对比
查看>>
用Swift实现一款天气预报APP(三)
查看>>
HttpApplication事件&ASP.NET页面周期
查看>>
春天。
查看>>
MapReduce对交易日志进行排序的Demo(MR的二次排序)
查看>>
Android -- Fragment注意事项
查看>>
Android APP测试的日志文件抓取
查看>>
DevDays2012 开发者日中文版资料下载
查看>>
ios开发学习-手势交互(Gesture)效果源码分享
查看>>
推荐15个国外使用 CSS3 制作的漂亮网站
查看>>
iOS:转载:UIControl的使用
查看>>
大叔也说并行和串行`性能提升N倍(N由操作系统位数和cpu核数决定)
查看>>
对ListenSocket 的研究(四)
查看>>
JQuery:JQuery 中的CSS()方法
查看>>
Linux内核跟踪之trace框架分析【转】
查看>>
内存分配器memblock【转】
查看>>
C# BackgroundWorker 详解
查看>>
IOS自定义表格UITableViewCell
查看>>
[Linux] ubuntu 格式化u盘
查看>>