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

亚马逊S3 Vue.js

A神无Harry

2020-03-18

我有一个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存储桶中的路由规则解决问题。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>

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

谢谢！

第2174篇《Vue.js路由器：历史记录模式和AWS S3（RoutingRules）》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
老丝神奇 2020.03.18

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

凯卡卡西 2020.03.18

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

自定义错误

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

斯丁AJinJin 2020.03.18

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

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

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

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

希望对您有所帮助。

干杯，亚历克斯

乐米亚 2020.03.18

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

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

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android