为什么当我试图从使用vue CLI迁移到vite时，只得到一个空白的白页？

Question

我不知道这里出了什么问题。我遵循了从vue-cli切换到vite的步骤，似乎我错过了一些步骤，因为我的网站没有显示。我已经检查了几个不同的存储库，我不知道我的代码与他们的代码有什么不同，因为他们的网站正在使用vite。我只想发布一些我的文件，希望能使我有明显的问题。如果从我发布的代码中找不到答案，我可以回到我的代码库，再次排除故障，如果失败，那么在这个问题中显示更多的信息。。

编辑：：我忘了提到我在开发人员控制台中遇到的一个错误

“未能加载资源:服务器响应的状态为404 (未找到)”，用于页脚:1.我不知道为什么会出现此错误。

如有任何反馈，将不胜感激。

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/路由器/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

错误信息似乎指向了这里：

import Footer from "@/components/Footer";

注意文件扩展名丢失了。这在Vue CLI支架项目中有效，因为可以配置默认文件扩展名。

在Vite中，导入成功需要路径中的文件扩展名：

import Footer from "@/components/Footer.vue";