Question

将使用vue-cli初始创建的vue.js应用部署到Firebase Hosting的最佳方法是什么？我准备了使用

进行部署的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”

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

}

put vue index.html那里，但是找不到“dist”。我在“公共”文件夹中移动了“dist”文件夹，最终 - 应用程序在firebase上在线。

但现在npm run dev已不再适用了。 Firebase cli似乎打破了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 app，另一个用于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中的图片相关的相关路径会被破坏。默认情况下保留公共设置。然后从Firebase项目的index.html目录中的vue-project复制dist和public - 文件夹。如果需要，您现在可以使用firebase serve测试localy将部署的内容如果一切正常，请使用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

上写了一篇深入的指南

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

3 个答案: