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

我不熟悉Stack Overflow，也不熟悉Vue.js，所以如果我事先做错了什么，请原谅：）

我正在构建一个只有主组件的应用程序，它位于我的根目录（/index.html）中。根据传递给路径的名称，该组件加载同名的json并基于该名称为SPA提供服务（重要提示：它不呈现纯json，它使用json装载SPA，这部分工作正常）。因此路径可以是以下任意一种（它们始终是动态的）：

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

---

因此，问题是：我做错了什么？

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

这是否回答了您的问题？这不是一个编码问题，也与Vue没有严格的关系。您的web服务器希望以指定的URL提供一个文件，但当然没有名为

foo

或其他任何文件。您需要告诉服务器，您希望它为根路径以外的所有流量提供根路径服务。这将加载应用程序，然后Vue可以执行此操作通过本地路径管理。在节点上执行此操作很简单，在Apache上，您可以使用.htaccess文件或规则重写。S3不完全是web服务器，但请检查此项谢谢！我怀疑它与服务器有关。我正在尝试配置S3。似乎我必须使用Cloudfront来执行此操作，因为S3无法处理这些问题“动态路径”非常好。我将购买一个域并尝试在Cloudfront上解决这个问题，谢谢你的提示！

    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;