使用Firebase主机部署Vue.js应用程序

Question

将最初使用vue-cli创建的vue.js应用程序部署到Firebase主机的最佳方式是什么？我用以下命令准备了vue-app

npm run build

这将创建文件夹"dist“，其中包含捆绑的js-file和图片等资源。

然后-在全局安装firebase工具之后，我运行

firebase init

这将创建一个文件夹"public“，其中包含默认的index.html文件。

首先我在firebase.json中设置：

  "hosting": {
"public": "dist"

}

并将index.html ( vue index.hltm)从根文件夹复制到"dist“文件夹。然后我部署了

firebase deploy

它运行了，但到图片的路径似乎被打破了。我在firebase.json中将公用文件夹设置为“公用”

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

}

一个put vue index.html在那里，但是没有找到"dist“。我把"dist"-folder移到了“public”文件夹里，终于在firebase上线了。

但现在npm run dev不再起作用了。火力基地似乎破坏了vue-cli。

那么如何让vue-cli和firebase-cli一起发挥作用呢？

Answer 1

当你运行firebase init时，会有一些问题被问到，比如你想使用哪个firebase特性并选择你的项目……当cli请求时

? What do you want to use as your public directory?

键入dist您所需的文件夹。现在将部署dist文件夹。

检查这个link，希望这能有所帮助。

Answer 2

我想我想通了。首先，保留两个独立的项目，一个用于vue应用程序，另一个用于Firebase托管。因此，CLI可以独立工作，不会出现任何问题。开发您的vue.js应用程序并准备使用npm run build进行部署。之后所需要的就是vue-project根目录中的index.html和文件夹dist Create Firebase project，其中CLI在空文件夹中执行firebase init。如果需要，您还可以在此处维护firebase函数。

您可以在firebase init期间或之后在firebase.json中编辑条目时定义公共目录

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

这将成为你的应用的根目录。Vue.js希望将index.html直接放在根目录中，并在根目录中包含一个子文件夹dist。因此，将dist定义为根目录并不是您想要的。像vue-app中图片的相关路径被破坏了。将设置保留为默认的public。然后从Firebase--folder中的public目录下的vue-project复制index.html和dist-folder。如果需要，现在可以使用firebase serve在本地测试要部署的内容。如果一切正常，可以使用firebase deploy进行部署

Answer 3

dist应该是您的公用文件夹。以下是使用Firebase托管的VueJS的工作配置：

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

我还写了一篇关于auto-deploying VueJS apps to Firebase hosting的深入指南