I’m trying to deploy my Vue.js website using Firebase Hosting, but I’m encountering an issue where the default Firebase Hosting welcome page is displayed instead of my actual website.
Steps I’ve Taken:
Build the Vue.js Project:
I run npm run build to generate the production-ready files. This creates a dist folder with the built assets.
Initialize Firebase:
I run firebase init and select the options to set up Firebase Hosting. During this process, I set the public directory to dist.
Deploy the Project:
I use firebase deploy to deploy the website.
Expected Outcome:
I expect to see my Vue.js application when I visit the deployed site.
Actual Outcome:
Instead, I see the default Firebase Hosting welcome page with the following text:
python
Copy code
Welcome
Firebase Hosting Setup Complete
You’re seeing this because you’ve successfully setup Firebase Hosting. Now it’s time to go build something extraordinary!
Open Hosting Documentation
Additional Details:
My firebase.json file is configured as follows:
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
The dist directory contains an index.html file along with other assets (JS, CSS, etc.).
I’ve confirmed that the build process completes successfully.
Question:
Why is Firebase displaying the default welcome page instead of my Vue.js app? Is there something I’m missing in the deployment process or configuration?
Additional Notes:
I have tried clearing the browser cache and re-deploying multiple times, but the issue persists.
Any guidance on how to troubleshoot or resolve this issue would be appreciated.