AWS Cloudfront支持vuejs的html5模式

2024-05-07 01:04

本文主要是介绍AWS Cloudfront支持vuejs的html5模式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前提

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

解决

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

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

参考

  • AWS CloudFront使用js函数实现重定向
  • CloudFront function to support HTML5 History API

这篇关于AWS Cloudfront支持vuejs的html5模式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/965890

相关文章

java设计模式之工厂模式--普通工厂方法模式(Factory Method)

1.普通工厂模式,就是建立一个工厂类,对实现了同一接口的一些类进行实例的创建。 2.先定义一个接口: package com.zhong.pattern.factorymethod;/*** 发送接口* @author admin**/public interface Sender {/*** 发送消息方法* @param msg*/void send(String msg);} 3

Java设计模式之代理模式2-动态代理(jdk实现)

这篇是接着上一篇继续介绍java设计模式之代理模式。下面讲解的是jdk实现动态代理。 1.)首先我们要声明一个动态代理类,实现InvocationHandler接口 package com.zhong.pattern.proxy;import java.lang.reflect.InvocationHandler;import java.lang.reflect.Method;/*** 演

java设计模式之代理模式1--静态代理

Java编程的目标是实现现实不能完成的,优化现实能够完成的,是一种虚拟技术。生活中的方方面面都可以虚拟到代码中。代理模式所讲的就是现实生活中的这么一个概念:助手。 代理模式的定义:给某一个对象提供一个代理,并由代理对象控制对原对象的引用。 1.)首先新建一个表演的接口 package com.zhong.pattern.proxy;/*** 表演接口* @author admin*

Java中23种设计模式之适配者模式

适配器模式的作用就是在原来的类上提供新功能。 主要可分为3种: 1.类适配:创建新类,继承源类,并实现新接口,例如:     class Adapter extends OldClass implements NewFunc{} 2.对象适配:创建新类持源类的实例,并实现新接口,例如:     class Adapter implements NewFunc { priva

Apache Shiro对web应用的支持-08

Apache Shiro for Web Applications 虽然Apache Shiro旨在用于保护任何基于JVM的应用程序,但它最常用于保护Web应用程序。它极大地简化了基于简单URL模式匹配和过滤器链定义来保护Web应用程序的方式。除了Shiro的API之外,Shiro的Web支持还包括一个丰富的JSP标记库来控制页面输出。 特征 简单的ShiroFilter web.xml定

关于HTML的多媒体标签

代码示例如下: <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Descriptio

关于HTML的框架标签及内嵌框架

框架标签的代码示例如下: <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Desc

关于HTML的表格标签

代码示例如下: <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Descriptio

关于HTML的清单标签

代码示例如下: <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Descriptio

关于HTML的图片标签

代码示例如下: <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Descriptio