vue 프로젝트에서 firebase로 호스팅하고 싶습니다...

[애니웨이웍스]

firebase 강의를 보고나서 vue로 만든 프로젝트도 잘 호스팅할 수 있으리라는 자신감을 가지고 시작해봤습니다. 그러나 도대체 계속 에러가 나서 지우고 깔고를 반복했네요...아래와 같은 순서로 진행했었습니다. 에러를 어떻게 해결해야할까요?? 아니면 vue 프로젝트에서 firebase를 연동하는 기초공사에 대한 순서만이라도 알려주시면 감사드리겠습니다. ㅠㅠ

vscode에서 폴더 실행하여 터미널에

  1) vue create 프로젝트명

  2) cd 프로젝트명

  3) npm install -g firebase-tools@9.23.1

  4) firebase login

  5) firebase init

    - 중간에 index.html을 덮어쓰냐고 해서, 기존의 것은 백업해두고 덮어쓴 후, 기존 데이터에서 "head","body"에 썼던 것들을 붙여넣음.(bootstrap 등)

  6) firebase serve를 했으나, 흰색 페이지만 나옴.

    ("URIError: URI malformed at decodeURI (<anonymous>)" 라는 에러가 뜸.)

  7) 혹시나해서 npm run serve를 해봤으나 컴파일에러가 뜸.

(Template execution failed: ReferenceError: features is not defined

ReferenceError: features is not defined

- index.html:4 eval
[.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:4:10

- index.html:7 module.exports
[.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:7:3

- index.js:284
[pro]/[html-webpack-plugin]/index.js:284:18

- runMicrotasks

- task_queues:96 processTicksAndRejections
node:internal/process/task_queues:96:5)

[애니웨이웍스]

또는 git에 업로드되어있는 자료 중 vue 프로젝트를 firebase로 호스팅한 예시자료를 알고계시면, 추천해주신다면 참고하여 공부해보겠습니다.

[애니웨이웍스]

저는 백방으로 찾다가 아래 영상 및 깃헙자료로부터 도움을 얻었습니다.

저와 비슷한 고민이 있으신 분들은 참고하셔요 ^^

https://www.youtube.com/watch?v=Kc-FbPSdezg

https://github.com/TylerPottsDev/yt-vuejs-firebase9-auth

[codingapple]

엥 미안합니다 답변한줄 알았네요

1. npm install firebase@8.10.1 설치하고

2. main.js파일에 

import firebase from "firebase/app";
import "firebase/firestore";

var firebaseConfig = {어쩌구  };

  firebase.initializeApp(firebaseConfig);
  export const db = firebase.firestore();

추가하고

3. 원하는 vue 파일에서 import {db} from './main.js' 해와서 db.collection() 어쩌구 쓰면 끝입니다 

[글쓴이]

글