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请求。注意,这里是重写,重写,重写,不是转发。

参考

相关推荐
2401_8576009532 分钟前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_8576009532 分钟前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL33 分钟前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js
轻口味38 分钟前
Vue.js 核心概念:模板、指令、数据绑定
vue.js
2402_8575834944 分钟前
基于 SSM 框架的 Vue 电脑测评系统:照亮电脑品质之路
前端·javascript·vue.js
java_heartLake2 小时前
Vue3之性能优化
javascript·vue.js·性能优化
ddd君317743 小时前
组件的声明、创建、渲染
vue.js
桃园码工3 小时前
8_HTML5 SVG (4) --[HTML5 API 学习之旅]
html5·svg·滤镜·文本·stroke
前端没钱3 小时前
从 Vue 迈向 React:平滑过渡与关键注意点全解析
前端·vue.js·react.js
顽疲4 小时前
springboot vue 会员收银系统 含源码 开发流程
vue.js·spring boot·后端