将 VueJS 应用程序部署到 Firebase 后页面为空

Question

我尝试在 Google Firebase 中部署两个应用程序，

一个比较简单，只是一个 App.vue 具有可以将信息传递到 Firebase 数据库的功能。

另一个有点复杂，有几个 vue 组件和 vue-router 的使用。

我对这两个应用程序执行了相同的步骤：

npm run build
firebase init

回答了一些提示后（我目前安装的firebase工具只问我要什么服务（Hosting），你要用什么项目（Firebase Project））

之后，我以相同的方式配置了两个应用程序的 firebase.json 文件：

{
"hosting": {
  "public": ""
}
}

从 npm run build 生成的 dist 文件夹不包含两个应用程序的任何 html 文件，我觉得这很奇怪所以我没有配置 [=15] 的路径=]

经过我运行firebase deploy，只有那个最简单的app才能正常显示。另一个只是空白页。我的 vue-router 没有使用历史模式，如何解决？

Answer 1

在构建之前确保你有 index.html 文件。

这是您要放置的正确配置：

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

我还写了一篇关于 auto-deploying VueJS apps to Firebase hosting

的深入指南