使用Firebase Hosting部署Vue.js应用程序

Question

如何将使用vue-cli创建的vue.js应用程序最初部署到Firebase托管？

我使用以下命令为部署准备了vue应用程序：

npm run build

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

然后，在全局安装firebase工具后，我运行以下命令：

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一起使用呢？

- zlit

Answer 1

当你运行firebase init命令时，会询问一些问题，比如你想使用哪个Firebase功能和选择你的项目...当cli要求输入时。

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

在你想要的文件夹中输入dist。现在，dist文件夹将被部署。

查看此链接，希望这能帮到你。

- Hareesh

Answer 2

我想我弄清楚了。 首先，保持两个独立的项目，一个用于Vue应用程序，一个用于Firebase-Hosting。 这样CLI就可以独立工作，不会出现任何故障。开发你的vue.js应用程序，并使用npm run build准备部署。之后，你所需要的是位于vue项目根目录下的index.html和dist文件夹。 在空文件夹中使用CLI执行firebase init创建Firebase项目。如果需要，你还可以维护Firebase函数。

你可以在firebase.json中定义公共目录，或者在firebase init之后编辑条目。

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

这将成为您的应用程序的根目录。Vue.js期望在根目录中直接有index.html和一个名为dist的子文件夹。 因此，将dist定义为根目录不是您想要的。Vue应用程序中的图片等相关路径会被破坏。 将公共设置保留为默认设置。然后将Vue项目中的index.html和dist文件夹复制到Firebase项目中的public目录中。 如果需要，您现在可以使用firebase serve本地测试部署内容。 如果一切正常，请使用firebase deploy进行部署。

- zlit

Answer 3

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

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

我还写了一篇深入指南，介绍如何将VueJS应用自动部署到Firebase托管上auto-deploying VueJS apps to Firebase hosting

- Gijo Varghese