Vue.js 路由器：历史模式和 AWS S3 (RoutingRules)

我有一个使用 Amazon S3 和 Cloudflare 启动并运行的 Vue.js 应用程序。

当我打开索引并浏览到 /dashboard 时，一切正常。但是，当我直接在新选项卡中打开仪表板之类的路线或刷新页面时，我从 S3 收到以下错误：

404 Not Found

Code: NoSuchKey
Message: The specified key does not exist.
Key: unternehmen
RequestId: 6514F8A1F4C29235
HostId: +BVrPLJSGdzSYogzWZ4GMBXkgkdSJWRVJVhcSs4EI/lmMUR422aCtCxpBGU6AMe5VkS1UbEn/Lc=

只要读到问题是 Vue.js 历史模式：https://router.vuejs.org/de/essentials/history-mode.html https://router.vuejs.org/de/essentials/history-mode.html

我想通过 Amazon S3 存储桶中的路由规则来解决该问题。 Apache RewriteRule 将如何查找 S3？

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

尝试了以下方法但不起作用：

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>domain.com</HostName>
      <ReplaceKeyWith>index.html</ReplaceKeyWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

如果我这样做，我只会渲染页眉和页脚，仅此而已。

谢谢你！

我知道这个答案来晚了，但如果其他人正在寻找另一种方法来解决这个问题，则无需在 s3 上创建自定义页面，以便在找不到页面时重定向用户。可以在 Cloudfront 中为分发创建自定义错误响应，而不是这样做。

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