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

Question

我不确定这里出了什么问题。我按照从 vue-cli 切换到 vite 的步骤操作，似乎我错过了一些步骤，因为我的网站没有显示。我已经检查了几个不同的存储库，但我不知道我的代码与使用 vite 的工作网站的代码有何不同。我只是要 post 我的一些文件，希望这些文件可以使我的问题变得明显。如果从我 posted 的代码中答案不明显，我可以返回我的代码库，再次进行故障排除，如果失败，则在该问题中显示更多信息。

编辑:: 我忘了说我在 chrome 的开发者控制台中遇到的一个错误是

“无法加载资源：服务器响应状态为 404（未找到）”Footer: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/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

错误信息似乎指向这里：

import Footer from "@/components/Footer";

请注意缺少文件扩展名。这在 Vue CLI 脚手架项目中有效，因为可以配置默认文件扩展名。

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

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

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

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

vue.js

vue-router

vite