Deploy a Vue.js App with Firebase Hosting

Make sure to install firebase-tools npm install -g firebase-tools

cd into your vue project’s root directory

Run npm run build in your root directory so that Vue builds your project for production. This will create a dist folder with everything you need to deploy… we’ll point Firebase to the dist folder in a sec.

run firebase init command

Select your the hosting option, and select the appropriate firebase project. Once you do this a .firebaserc file will be added to your directory. This file should be good to go. Also, a firebase.json file will have been added.

Configure your firebase.json file to reference the dist folder. It should look something like this:

OR if you’re using HTML5 History Mode in Vue Router, configure your firsebase.json like this:

Run firebase deploy

Congrats, you did it!!! 🎉

To deploy future builds, just run:

npm run build to build your project, then firebase deploy to deploy it.

Having Trouble?

Some folks have reported issues when running npm run build . Jacques Beets was kind enough to summarize a solution here:

Believer, husband, code noodler, occasional poem writer.