Deploy a Vue.js App with Firebase Hosting
A short and sweet guide
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:
{
"hosting": {
"public": "./dist"
}
}
OR if you’re using HTML5 History Mode in Vue Router, configure your firsebase.json
like this:
{
"hosting": {
"public": "./dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
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: https://medium.com/@jacques.beets/hi-shayne-9a7bbca8d945