Vue.js路由器:历史记录模式和AWS S3(RoutingRules) [英] Vue.js Router: history mode and AWS S3 (RoutingRules)

问题描述

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

当我打开索引并浏览到/dashboard时，一切正常.但是，当我直接在新标签页中打开仪表板之类的路线或刷新页面时，我从S3返回以下错误:

找不到

  404代码:NoSuchKey消息:指定的密钥不存在.密钥:下位RequestId:6514F8A1F4C29235HostId:+ BVrPLJSGdzSYogzWZ4GMBXkgkdSJWRVJVhcSs4EI/lmMUR422aCtCxpBGU6AMe5VkS1UbEn/Lc = 

只需阅读一下问题就是Vue.js历史记录模式:

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

I have a Vue.js application up and running with Amazon S3 and Cloudflare.

When I open the index and browse to /dashboard, everything works fine. But when I open a route like dashboard directly in a new tab or refresh the page, I get the following error back from S3:

404 Not Found

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

Just read that the problem is Vue.js history mode: https://router.vuejs.org/de/essentials/history-mode.html

I would like to solve the problem with a routing rule in my Amazon S3 Bucket. How would the Apache RewriteRule look for 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>

Tried the following but it does not work:

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

If I do it like that I just get my Header and Footer rendered but nothing more.

Thank you!

解决方案

I know this answer comes late but in case someone else is looking for another way to solve this in cloudfront, there's no need to create custom pages on s3 redirecting users when pages are not found. Instead of doing it, custom error responses can be created in cloudfront for the distribution.

This will always redirect to /index.html in case a file is not found and that will make the app route trigger.

这篇关于Vue.js路由器:历史记录模式和AWS S3(RoutingRules)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！