【问题标题】:VueJS and Firebase, history mode 404 error when refreshVueJS和Firebase,刷新时历史模式404错误
【发布时间】:2018-04-27 07:32:48
【问题描述】:

我在路由器文件中删除了带有历史模式的链接中的 hashbang。 现在,当我刷新页面时,我得到了 404 错误。

我尝试关注this link

然后,我在 firebase.json 中添加了部分:

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

然而一切都没有改变。

我不明白为什么我仍然有这个错误。 我尝试了很多东西,但找不到可以解决的问题。

这是我的路由器文件:

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/catalog'
    },
    {
      path: '/catalog',
      name: 'Catalog',
      component: Catalog
    },
    {
      path: '/catalog/category/:category',
      name: 'ProductsList',
      component: ProductsList
    },
    {
      path: '/catalog/category/:category/product/:id',
      name: 'ProductDetail',
      component: ProductDetail,
    },
    {
      path: '/catalog/category/:category/product/create',
      name: 'CreateProduct',
      component: CreateProduct
    }
  ]
});

【问题讨论】:

  • 你看到了吗:router.vuejs.org/en/essentials/history-mode.html Taje 看看服务器配置。我遇到了同样的问题,不得不使用此链接上的解决方法。
  • 您好,谢谢。是的,我说我用这个链接实现了这个,但没有任何改变:(
  • 我认为你的 firebase 配置没有坚持。从我在网上看到的内容来看,重写看起来是正确的。是需要重启服务器,还是firebase文件部署错了地方?
  • 是的,它肯定来自 Firebase,但我找不到在哪里。还在继续……
  • firebase 文件也部署在好地方。我在我的 dist/repo 上使用 npm serve 来通过 npm 构建对其进行测试。帮助:'(

标签: firebase vue.js vuejs2 http-status-code-404 vuefire


【解决方案1】:

我能想到的唯一一件事是您尚未将更改部署到您的 firebase.json 文件。

执行

firebase deploy --only hosting

您应该能够从项目的Hosting page 查看部署历史记录。确认更改已部署。

【讨论】:

  • 在我的本地主机中,我的 vuejs 项目运行良好,但是当我将它部署在 firebase 托管上时,我收到 404 在我的所有路由中都找不到,即使使用firebase deploy --only hosting 命令问题仍然存在,它不会工作
  • @FernandoTorres 你需要在你的firebase.json 文件中添加hosting.rewrites 配置(就像上面的问题一样)
  • 感谢您的热情回复。我刚刚在我的firebase.json 中添加了那一行,但是当我完成部署它时(使用firebase deploy --only hosting 命令)我的firebase.json 回到只有这个内容的初始化状态:{ "hosting": { "public": "dist", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ] } } 你知道什么是发生?此外,我的路线仍然无法正常工作:(
  • 抱歉,我从未见过firebase deploy 命令对firebase.json 文件进行任何更改
  • 不用担心,Phil,非常感谢您的关注,我仍然会寻找解决方案,当我成功时,我会回来告诉您未来的任何用途
猜你喜欢
  • 2021-09-27
  • 2023-03-20
  • 2018-12-26
  • 2018-07-07
  • 1970-01-01
  • 2018-12-09
  • 2021-02-04
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多