amazon-s3 - Vue.js 路由器 : history mode and AWS S3 (RoutingRules)

Question

我在 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

我想用我的 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>

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

谢谢!

Answer 1

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

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