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

CodePudding user response：

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";