AWS Cloudfront支持vuejs的html5模式

前提

  • 1.vuejs项目使用html5模式;
  • 2.vuejs项目独立部署在一个s3桶中;
  • 3.vuejs项目独立使用一个AWS Cloudfront的CDN。

解决

只需要在Cloudfront中添加一个函数,大概规则就是如果从请求uri中提取到文件名,则表示需要访问s3,如果没有则重写到/index.html请求。

具体函数内容如下:

javascript 复制代码
function handler(event) {
	var request = event.request;
	if (request.uri.match(/\/[^./]+\.[^./]+$/) === null) {
		request.uri = "/index.html";
	}
	return request;
}

具体怎么样在AWS Cloudfront中设置函数,可以参考AWS CloudFront使用js函数实现重定向

总结

vuejs的html5模式就是但没有发现文件名就重写到/index.html请求。注意,这里是重写,重写,重写,不是转发。

参考

相关推荐
xChive1 小时前
优化表单交互:在 el-select 组件中嵌入表格显示选项
前端·vue.js·交互·element-plus
_jacobfu1 小时前
mac2024 安装node和vue
前端·javascript·vue.js
羽羽Ci Ci1 小时前
axios vue.js
前端·javascript·vue.js
axihaihai1 小时前
购物街项目TabBar的封装
vue.js
栈老师不回家2 小时前
Element UI 组件库详解【Vue】
前端·vue.js·ui
栈老师不回家2 小时前
axios 请求跨域问题
前端·vue.js
不熬夜的臭宝3 小时前
每天10个vue面试题(九)
javascript·vue.js·ecmascript
前端白袍4 小时前
Vue:后端返回二进制文件,前端如何实现浏览器自动下载?
前端·javascript·vue.js
大得3694 小时前
css水平居中+垂直居中
vue.js·react
Jet_closer_burning5 小时前
Vue.js 自定义指令:从零开始创建自己的指令
前端·javascript·vue.js