使用 Firebase 托管部署 Vue.js 应用答案

【问题标题】：Deploy a Vue.js App with Firebase Hosting使用 Firebase 托管部署 Vue.js 应用
【发布时间】：2017-12-21 22:15:06
【问题描述】：

将最初使用 vue-cli 创建的 vue.js 应用程序部署到 Firebase 托管的最佳方式是什么？我准备了要部署的 vue-app

npm run build

这将使用捆绑的 js 文件和图片等资产创建文件夹“dist”。

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

firebase init

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

首先我在 firebase.json 中设置：

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

}

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

firebase deploy

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

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

}

将 vue index.html 放在那里，但没有找到“dist”。我将“dist”文件夹移到“public”文件夹中，最后，App 在 firebase 上在线。

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

那么如何让 vue-cli 和 firebase-cli 一起玩呢？

【问题讨论】：

标签： firebase vue.js firebase-hosting firebase-tools

【解决方案1】：

当您运行 firebase init 时，系统会询问几个问题，例如您要使用哪个 firebase 功能并选择您的项目...当 cli 要求时

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

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

查看link，希望对您有所帮助。

【讨论】：

【解决方案2】：

我想我明白了。首先，保留两个单独的项目，一个用于 vue 应用程序，一个用于 Firebase-Hosting。所以 CLI 可以独立工作，没有任何问题。开发您的 vue.js 应用程序并准备使用 npm run build 进行部署。之后您只需要 vue-project 根目录中的 index.html 和文件夹 dist 使用 CLI 在空文件夹中执行 firebase init 创建 Firebase 项目。如果需要，您还可以在此处维护 firebase 功能。

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

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

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

【讨论】：

【解决方案3】：

dist 应该是您的公用文件夹。这是带有 Firebase 托管的 VueJS 的工作配置：

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

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

【讨论】：