AWS Cloudfront支持vuejs的html5模式

AWS CloudFront 支持 Vue.js 应用的 HTML5 模式，这意味着你可以通过 CloudFront 为使用 Vue.js 构建的单页应用 (SPA) 提供服务，并且用户在浏览应用时不会看到 # 后跟着的 URL 片段。为了实现这一点，你需要确保 Vue.js 应用被配置为使用 HTML5 模式，并且你需要在 CloudFront 中正确地设置你的路径和错误重定向。

以下是一个基本的 Vue.js 应用配置为 HTML5 模式的例子：

// Vue Router 配置
import Vue from 'vue';
import Router from 'vue-router';
 
Vue.use(Router);
 
const router = new Router({
  mode: 'history', // 使用 HTML5 模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/components/Home.vue')
    },
    // 其他路由...
  ]
});
 
export default router;

确保你的 Vue.js 应用使用 mode: 'history' 配置 Vue Router，这样就可以启用 HTML5 模式。

接下来，在 CloudFront 中配置你的错误重定向和默认文档，确保当用户访问的路径不存在时，可以重定向到你的 index.html 文件。

在 CloudFront 的 Behavior 设置中：

1. 选择你的 Vue.js 应用对应的 Distribution。
2. 点击 "Edit" 来编辑 Behavior。
3. 在 "Default Cache Behavior Settings" 下，确保 "Custom Error Response" 中已经配置了 404 错误重定向到你的 index.html 文件。
4. 在 "Default Cache Behavior" 的 "Origin" 设置中，确保 "Custom Origin Settings" 中 "Origin Protocol Policy" 设置为 "Match Viewer" 或者 "HTTPS Only"，这样 CloudFront 就可以正确地从你的源服务器请求内容。

通过以上步骤，你的 Vue.js 应用应该能够在 AWS CloudFront 上以 HTML5 模式正常运行。