添加路径时，作为子域的 VueJS 应用程序抛出 404答案

【问题标题】：VueJS app as subdomain throws 404 when a path is added添加路径时，作为子域的 VueJS 应用程序抛出 404
【发布时间】：2020-01-22 19:21:29
【问题描述】：

我有一个投资组合网站 portfolio.com 和一个指向 Netlify 上托管的 VueJS 前端的子域 vuejsapp.portfolio.com

用户将文件上传到应用程序，它会生成一个下载链接 URL，例如 vuejsapp.portfolio.com/download/048677a。当我导航到 VueJS 应用程序中的链接时（通过单击按钮在上传后重定向），它会毫无问题地重定向到下载组件。但是，如果我直接在浏览器中复制并粘贴该链接，则会引发 404 错误。这是为什么呢？

我知道这与 Vue 路由器配置有关，但我似乎找不到太多关于它的信息，或者我找错地方了。有人可以告诉我我缺少什么或指向我一些相关文件吗？

我的router.js 文件：

 Vue.use(Router);

    export default new Router({
      mode: "history",
      base: process.env.BASE_URL,
      routes: [
        {
          path: "/",
          name: "home",
          component: Home,
        },
        {
          path: "/about",
          name: "about",
          component: About
        },
        {
          path: "/download/:id",
          name: "download",
          component: Download,
          props: route => ({ id: route.params.id }),
        }
      ]
    });

【问题讨论】：

您是否可以通过手动在地址栏中键入来导航到任何其他路线？如果是这样，您必须在 Netlify 中设置回退到您的根路由。猜猜这应该是可能的。
@Aer0 我也有一个空的“关于”页面，我已经省略了，但是当我尝试在浏览器中手动键入该 url (vuejsapp.portfolio.com/about) 时，我得到了相同的 404 错误。就好像它试图从portfolio.com 而不是子域中获取路径。请注意，在普通的 localhost 开发环境中，如果我手动输入它就可以正常工作。
所以你是说你在你的路由中设置了一个额外的路由，只是为了about？
基本上是的。我已经用路线更新了问题。我最初只是省略了它，因为它不相关并且只是链接到一个空组件。
你见过：router.vuejs.org/guide/essentials/history-mode.html 吗？如果您使用历史模式，则需要进行一些服务器配置。

标签： vue.js

【解决方案1】：

由于代码/设置在您的本地环境中正常运行，并且仅在 Netlify 上中断，因此很明显您遇到了错误的服务器配置问题。

您的 Netlify 环境必须知道它应该始终将任何请求路由到 / 并将路由留给您的 Vue 应用程序。您可以在Netlify docs 中阅读有关如何解决该问题的更多信息。

【讨论】：

谢谢！这个答案让我对 Netlify 的重定向进行了更多的谷歌搜索，我发现这篇文章 medium.com/js-dojo/… 通过在我的应用程序的 public 文件夹中创建 _redirects 文件并添加 /* /index.html 200 来帮助我解决了我的问题。部署到 Netlify 后，现在一切正常。