소개

참고 사이트
· htps : // cぃ. 아 js. rg/
· htps : // 푹 빠져라. 오, ぇ. 이 m/두 cs/cぃ? hl = 그럼 # 마 c 오 s

순서 1

Vue CLI를 설치하지 않은 사람은

$ yarn global add @vue/cli

터미널에서 실행합니다.
둘째,

$ vue create プロジェクト名

? Please pick a preset:
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)

순서 2

$ cd プロジェクト名
$ yarn serve
$ yarn build

$ vue add router
? Use history mode for router?  Y

순서 3

$ yarn init

질문을 받지만 모두 Enter

순서 4

$ yarn add firebase
$ yarn global add firebase-tools

순서 5

여기서 디렉토리를 조금 만지십시오.

src/main.js

import firebase from 'firebase'

const config = {
  apiKey: “XXX”,
  authDomain: “XXX”,
  databaseURL: “XXX”,
  projectId: “XXX”,
  storageBucket: “XXX”,
  messagingSenderId: “XXX”
}

firebase.initializeApp(config)

를 추가합니다. 어디에서 apiKey등을 가져올까라고 하면, Firebase에 날아 주어, 우상의 「콘솔에 이동」을 클릭.
프로젝트 선택.
아래 이미지와 같이 "프로젝트 설정"을 클릭하십시오.

페이지를 이동하면 아래로 스크롤하면 표시됩니다. 그것을 복사합니다.

순서 6

터미널로 돌아가

$ firebase login

$ firebase init
? Which Firebase CLI features do you want to set up for this folder? 
> Hosting

? Please select an option: 
> Use an existing project

? Select a default Firebase project for this directory:
> Firebaseで作成したproject名を選択

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

? Configure as a single-page app (rewrite all urls to /index.html)?
N

? File dist/index.html already exists. Overwrite?　N

마지막

$ firebase deploy

에서 배포할 수 있습니다.
그러나 다음 명령으로 시도(로컬 환경)에서 배포될 때와 정확히 동일한 내용을 표시할 수 있습니다.

$ firebase serve --only hosting

평소에는

$ yarn serve

로 확인하면서 제작하는 것이 좋을까. 갑자기 배포는 정신적 장애물이 높기 때문에 아무것도 확인하고 마지막으로 배포합시다.

뭔가 있으면 코멘트 분, 부탁드립니다.
추후 실제로 디렉토리를 괴롭히더라도 오류가 발생하지 않는지 확인해 보겠습니다. 또, Firebase의 프로젝트 작성 순서도 쓸 수 있으면.
우선, Qiita에 첫 투고하고 싶었으므로 써 보았습니다.
Vue + Firebase로 한 가지 환경 구축 ~ 배포까지 도움이 될 수 있으면 다행입니다.