Firebase 部署 VUE 项目刷新后 404 错误

通过正常的单击打开的页面可以正常访问,但如果刷新的话,显示 404 错误。

生成错误的录屏。

问题和解决

这个错误的原因标识 VUE 在 Firebase 中的重定向问题。

使用的 firebase.json 文件格式如下:

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

需要把这个文件修改为:

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

添加了重定向的配置。

然后再次刷新页面就没有问题。