VueJS和Firebase，刷新时历史模式404错误

Posted 2023-02-16

【中文标题】VueJS和Firebase，刷新时历史模式404错误

【英文标题】：VueJS and Firebase, history mode 404 error when refresh

【发布时间】：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 构建对其进行测试。帮助：'(

【参考方案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，非常感谢您的关注，我仍然会寻找解决方案，当我成功时，我会回来告诉您未来的任何用途