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

Question

我有一个Vue.js应用程序,并运行Amazon S3和Cloudflare.

当我打开索引并浏览到/ 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 Bucket中使用路由规则解决问题.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重定向用户上创建自定义页面.可以在cloudfront中为分发创建自定义错误响应,而不是这样做.

这将始终重定向到/index.html以防万一找不到文件,这将使应用程序路由触发.

Answer 2

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

Answer 3

我正在使用“静态网站托管”在 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”的空字符串不会触发正确的路由。

我希望它有帮助。

干杯，亚历克斯