Deploy a Vue.js App with Firebase Hosting

Question

What is the best Way to deploy a vue.js app initialy created with vue-cli to Firebase Hosting? I prepared the vue-app for deployment with

npm run build

This creates the folder "dist" with the bundled js-file and assets like pictures.

Then- after installing firebase tools globaly, I run

firebase init

This creates a folder "public" with a default index.html file inside.

First i set in firebase.json:

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

}

and copied the index.html (the vue index.hltm) from the root-folder to "dist" folder. Then i deployed with

firebase deploy

It runs, but the paths to the pictures seem to be broken . I set public folder to "public" in firebase.json

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

}

an put vue index.html there, but then "dist" is not found. I moved the "dist"-folder inside the "public"folder, and finaly- App is online on firebase.

But now npm run dev is not working any more. Firebase cli seems to break vue-cli.

So how to get vue-cli and firebase-cli playing together?

Answer 1

When you run firebase init few questions will be asked, like which firebase feature you want to use and select your project... when cli asks for

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

Type dist your desired folder. Now the dist folder will be deployed.

Check this link, Hope this helps.