Why am I getting just a blank white page when I tried to migrate from using vue CLI to vite - vue.js

Question

I am unsure what is going wrong here. I followed the steps on switching from vue-cli to vite and it seems I have missed some steps because my website is not being displayed. I have checked several different repositories and I don't know how my code is any different than theirs who have working websites using vite. I am just going to post a few of my files that hopefully should make the issue I have obvious. If the answer is not obvious from the code I have posted I can go back to my codebase, troubleshoot again and if that fails then display more info in this question.
Edit:: I forgot to mention that the one error I get in the developer console for chrome is
"Failed to load resource: the server responded with a status of 404 (Not Found)" for Footer:1. I am unsure why this error is occuring.
Any feedback will be appreciated.
src/app.vue:
<template>
<router-view />
<Footer />
</template>
<script>
//import Navbar from "#/components/Navbar";
import Footer from "#/components/Footer";
export default {
name: "App",
components: {
//Navbar,
Footer
},
data: () => ({
}),
};
</script>
<style>
#app {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: black;
display: flex;
flex-direction: column;
height: 100%;
}
body {
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0px ;
}
.centre-body{
flex: 1 0 auto;
}
</style>
src/main.vue
import { createApp } from 'vue'
import App from "./App.vue";
import router from "./router/index";
import store from "./store/index";
Vue.config.productionTip = false;
createApp(App).use(router).use(store).mount('#app')
vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
const path = require("path");
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"#": path.resolve(__dirname, "./src"),
},
},
});
package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
},
"dependencies": {
"#vitejs/plugin-vue": "^1.6.1",
"#vue-leaflet/vue-leaflet": "^0.6.0",
"axios": "^0.21.1",
"global": "^4.4.0",
"highcharts": "^9.0.1",
"loading-visualization": "^1.2.14",
"mapbox-gl": "^1.0.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vue3-echarts": "^1.0.3",
"vue3-highcharts": "^0.1.3",
"vueperslides": "^3.2.0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"#vue/compiler-sfc": "^3.0.0",
"#vue/eslint-config-prettier": "^6.0.0",
"eslint": "^8.10.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^8.5.0",
"prettier": "^1.19.1",
"sass": "^1.26.5",
"vite": "^2.8.6",
"vue-loader-v16": "^16.0.0-beta.5.4"
}
}
src/router/index.js
import { createRouter, createWebHashHistory } from "vue-router"
import Home from "../views/Home.vue"
import Information from "../views/Information.vue"
import Contact from "../views/Contact.vue"
import ExploreScience from "../views/ExploreScience.vue"
import ProjectData from "../views/ProjectData.vue"
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/Information",
name: "Information",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Information
},
{
path: "/Contact",
name: "Contact",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Contact
},
{
path: "/ProjectData",
name: "ProjectData",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: ProjectData
},
{
path: "/exploreScience",
name: "ExploreScience",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: ExploreScience
},
];
const router = createRouter({
mode: "history",
base: import.meta.env.BASE_URL,
routes,
});
export default router

Answer 1

The error message seems to point here:
import Footer from "#/components/Footer";
Notice the file extension is missing. That worked in a Vue CLI scaffolded project because it was possible to configure default file extensions.
In Vite, the file extension is required in the path for the import to succeed:
import Footer from "#/components/Footer.vue";
👆