Vue.js路由器：历史记录模式和AWS S3（RoutingRules）

如果您在AWS S3上使用静态托管，并且这是SPA应用程序（React，Vue，Angular等），则应将index.html设置为错误页面：

我知道这个答案来得很晚，但是如果其他人正在云中寻找其他方法来解决这个问题，则无需在s3上创建自定义页面，当找不到页面时会重定向用户。代替这样做，可以在cloudfront中为分发创建自定义错误响应。

如果/index.html找不到文件，它将始终重定向到，这将触发应用程序路由。

我正在使用“静态网站托管”托管S3中Vue中制作的静态PWA，它可以按预期工作。我所做的非常简单-我添加了以下内容：

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>403</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <ReplaceKeyWith></ReplaceKeyWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

S3存储桶的属性。见下图：

对于我的S3存储桶，每次尝试访问不存在的文件时，您都会收到403（禁止访问）而不是404。这就是为什么我将HttpErrorCodeReturnedEquals更改为403的原因。我还用替换了ReplaceKeyWith一个空字符串，如“ index.html”，表示未触发正确的路由。

希望对您有所帮助。

干杯，亚历克斯

在历史记录模式下进行路由而不使用CloudFront的一种方法是创建您的URI指向的文件。因此，假设您使用index.html作为入口点，并且只有另一个页面提供了page2.html路径。

然后，您应该调整构建和部署过程以执行以下操作：

1. 将您的资源构建到生产发行版中（例如，使用npm run build）
2. 确保为路由器链接按路径创建一个文件，该文件是原始文件的副本。在本例中，我提到它将创建“ dist / index.html”到“ dist / page2.html”的副本
3. 将dist文件夹内容复制到S3存储桶

请注意，步骤1和2的顺序很重要。这可以通过发布您的网站的脚本轻松完成。我刚刚将这种方法用于想要的结果。允许刷新页面并在新标签页中打开链接。

我看到的缺点是：-存储文件副本的开销-必须确保是否添加页面，不要忘记更新构建和部署脚本。