将最初使用vue-cli创建的vue.js应用程序部署到Firebase Hosting的最佳方法是什么?我准备使用部署vue-appnpm 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一起运行呢?
3条答案
按热度按时间14ifxucb1#
当你运行
firebase init
时,会问一些问题,比如你想使用哪个firebase特性,选择你的项目......当cli询问时键入
dist
您想要的文件夹,现在dist文件夹将被部署。检查此link,希望这有帮助.
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.html
和dist
-folder项目在public
目录中的Firebase-project。如果需要,现在可以在本地测试使用firebase serve
部署的内容。如果一切正常,请使用firebase deploy
部署klr1opcd3#
dist
应该是您的公共文件夹。下面是使用Firebase托管的VueJS的工作配置:我还编写了一份关于auto-deploying VueJS apps to Firebase hosting的深度指南