使用Firebase托管部署Vue.js应用程序

8zzbczxx  于 2023-03-03  发布在  Vue.js
关注(0)|答案(3)|浏览(167)

将最初使用vue-cli创建的vue.js应用程序部署到Firebase Hosting的最佳方法是什么?我准备使用部署vue-app
npm run build
这将创建一个文件夹“dist”,其中包含捆绑的js文件和图片等资源。
然后-在全局安装firebase工具后,我运行

firebase init

这将创建一个文件夹“public”,其中包含默认的index.html文件。
首先我设置了火力点

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

}
并将index.html(vueindex.hltm)从根文件夹复制到“dist”文件夹。

firebase deploy

它运行了,但是图片的路径好像断了。我在firebase.json中将public folder设置为“public”

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

}
我把vue index.html放在那里,但是没有找到“dist”。我把“dist”文件夹移到了“public“文件夹中,最后- App在firebase上在线了。
但是现在npm run dev已经不工作了,Firebase cli好像坏了vue-cli。
那么如何让vue-cli和firebase-cli一起运行呢?

14ifxucb

14ifxucb1#

当你运行firebase init时,会问一些问题,比如你想使用哪个firebase特性,选择你的项目......当cli询问时

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

键入dist您想要的文件夹,现在dist文件夹将被部署。
检查此link,希望这有帮助.

50few1ms

50few1ms2#

我想我明白了。首先,保持两个独立的项目,一个用于vue应用程序,一个用于Firebase-Hosting。因此,CLI可以独立工作,不会出现任何问题。开发您的vue.js应用程序,并准备使用npm run build进行部署。之后,您所需要的就是vue中的index.html-项目根和文件夹dist使用CLI在空文件夹中执行firebase init创建Firebase项目。如果需要,您还可以在此处维护Firebase函数。
firebase init期间或之后编辑firebase.json中的条目时定义公共目录
"hosting": { "public": "public"}
这将成为你的应用程序的根目录。Vue.js希望index.html直接在根目录中,并在其中有一个子文件夹dist。因此,将dist定义为根目录并不是你想要的。vue-app中图片的相关路径会被破坏。默认情况下,保留公共设置。然后从vue-复制index.htmldist-folder项目在public目录中的Firebase-project。如果需要,现在可以在本地测试使用firebase serve部署的内容。如果一切正常,请使用firebase deploy部署

klr1opcd

klr1opcd3#

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

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

我还编写了一份关于auto-deploying VueJS apps to Firebase hosting的深度指南

相关问题