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

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

npm运行构建

这将创建文件夹“dist”，其中包含捆绑的js文件和图片等资产

然后-在全局安装firebase tools后，我运行

firebase init

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

首先，我在firebase.json中设置：

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

}

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

firebase deploy

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

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

}

将vue index.html放在那里，但找不到“dist”。 我把“dist”文件夹移到了“public”文件夹中，最后，这个应用程序在firebase上上线了

但是现在npm run dev不再工作了。Firebase cli似乎破坏了vue cli

---

那么，如何让vue cli和firebase cli一起使用呢？

当您运行

firebase init

时，会问一些问题，比如您想使用哪种firebase功能并选择您的项目。。。当cli要求

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

键入所需文件夹的

dist

。现在将部署dist文件夹

检查一下，希望这能有所帮助。

我想我找到了答案。 首先，保留两个Separanet项目，一个用于vue应用程序，一个用于Firebase托管。 因此CLI可以独立工作，不会出现任何问题。开发您的vue.js应用程序，并准备使用

npm run build

进行部署。之后您只需要vue项目根目录中的

index.html

和文件夹

dist

创建Firebase项目，CLI在空文件夹中执行

Firebase init

。如果需要，您还可以在此处维护firebase功能

您可以在

firebase init

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

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

“托管”：{“公共”：“公共”}

这将成为应用程序的根目录。Vue.js希望在根目录中直接包含

index.html

，并在其中包含一个子文件夹

dist

。 因此，将

dist

定义为根目录并不是您想要的。与vue应用程序中的图片相关的路径被破坏。 将公共设置保留为默认设置。然后从Firebase项目的

public

目录中的vue项目中复制

index.html

和

dist

-文件夹。 如果您愿意，现在可以使用

firebase-service

---

如果一切正常，使用

firebase部署
dist
部署应该是您的公用文件夹。以下是具有Firebase主机的VueJS的工作配置：

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

我还写了一篇关于