How to deploy a vue js project to firebase?

[sunmingtao]

The biggest issue I encountered was there is no index.html file in dist folder after running npm run build. There is only a build.js file.

However, the youtube tutorial https://www.youtube.com/watch?v=a-0W40NM0dI clears shows there is an index.html.

[sunmingtao]

Short answer: The project was created by Vue js cli 2, and there is no index.html in the dist folder. Need to upgrade vue js cli 3 (@vue/cli). Follow https://github.com/sunmingtao/sample-code/issues/100

Upgrade node.js and npm to the latest version

(base) msun-vuecli3-hello-world (master)\ =>npm -v
6.13.6
(base) msun-vuecli3-hello-world (master)\ =>node -v
v13.7.0

Older versions might cause trouble: https://github.com/sunmingtao/sample-code/issues/101

Make sure Vue CLI is version 3+

(base) msun-vuecli3-hello-world (master)\ =>vue -V
@vue/cli 4.1.2

Create a new vue js project

vue create vuecli3-hello-world
cd vuecli3-hello-world/

Make sure it runs locally npm run serve

Build production version npm run build

Log in firebase firebase login Initiate firebase firebase init

• Which Firebase CLI features do you want to set up: Hosting
• What do you want to use as your public directory? (public) : dist
• Configure as a single-page app (rewrite all urls to /index.html)? (y/N): y
• File dist/index.html already exists. Overwrite? (y/N) N

Start firebase server locally to see if it works firebase serve Finally deploy firebase deploy