Vue.js - 如何将所有请求重定向到同一个组件

Posted 2023-02-22

【中文标题】Vue.js - 如何将所有请求重定向到同一个组件

【英文标题】：Vue.js - How to redirect all requests to the same component

【发布时间】：2020-05-30 14:39:01

【问题描述】：

我是 Stack Overflow 的新手，我是 Vue.js 的新手，所以如果我做错了什么，请提前原谅我 :)

我正在构建一个只有主要组件的应用程序，它位于我的根目录 (/index.html) 中。基于传递给路径的名称，该组件加载一个同名的 json 并基于它服务于 SPA（重要：它不呈现纯 json，它使用 json 来挂载一个SPA，这部分工作正常）。所以路径可以是以下的任何（它们是总是动态的）：

http://my-example-site.s3-website-sa-east-1.amazonaws.com/*foo*
http://my-example-site.s3-website-sa-east-1.amazonaws.com/*bar*
http://my-example-site.s3-website-sa-east-1.amazonaws.com/*anotherfoo*
http://my-example-site.s3-website-sa-east-1.amazonaws.com/*anotherbarandsoon*

当我在 dev 上运行时它工作正常，但是当我将它构建到 S3 时，我得到一个 404 说它找不到“foo”路径。最快的解决方法是在 S3 上将我的错误页面设置为“index.html”，但这当然不是一个好主意，因为我总是得到 404（尽管页面呈现正确，即使我没有得到 200或类似的）

我做了一些研究（可能还不够，抱歉 :() 并找到了这段代码：

    const router = new VueRouter(
      base: __dirname,
      mode:'history',
      routes: [
        
              path: '*',
              redirect: '/index.html'
          
      ]
    );
    var vm = new Vue(
        router,
        el: '#app',
        render: h => h(App)
    );

    global.vm = vm;

我没有收到任何编译错误，它运行良好......直到我把它放在 S3 上。同样的问题：404。

所以，问题是：我做错了什么？

【问题讨论】：

这能回答你的问题吗？ Vue Router return 404 when revisit to the url

这不是编码问题，也不是与 Vue 严格相关的问题。您的 Web 服务器希望在指定的 URL 处提供文件，但当然没有名为 foo 或其他名称的文件。您应该告诉服务器您希望它为根路径之外的所有流量提供根。这将加载应用程序，然后 Vue 可以在本地接管路径管理。这在 Node 上很简单，在 Apache 上你可以使用 .htaccess 文件或规则重写。 S3 不完全是一个 Web 服务器，但请查看 ***.com/questions/16267339/…

谢谢！我怀疑它与服务器有关。我正在尝试配置 S3。

看来我必须为此使用 Cloudfront，因为 S3 不能很好地处理这些“动态路径”。我将购买一个域并尝试在 Cloudfront 上解决此问题，谢谢您的提示！

【参考方案1】：

正如我上面所写，S3 本身似乎无法正确处理这些请求。解决方案是使用 Cloudfront，它有更多的方法来处理错误处理和重写响应代码 - 我将其配置为捕获 404 错误并将它们重写为 200。