當我嘗試從使用vueCLI遷移到vite時，為什么我只得到一個空白頁

我不確定這里出了什么問題。我按照從 vue-cli 切換到 vite 的步驟操作，似乎我錯過了一些步驟，因為我的網站沒有顯示。我檢查了幾個不同的存盤庫，但我不知道我的代碼與使用 vite 的作業網站的代碼有何不同。我只是要發布一些我的檔案，希望這些檔案可以使我遇到的問題變得明顯。如果從我發布的代碼中答案不明顯，我可以回傳我的代碼庫，再次進行故障排除，如果失敗，則在此問題中顯示更多資訊。

編輯:: 我忘了提到我在 chrome 的開發者控制臺中遇到的一個錯誤是

“加載資源失敗：服務器回應狀態為 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"),
    },
  },
});

包.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

uj5u.com熱心網友回復：

錯誤訊息似乎指向這里：

import Footer from "@/components/Footer";

請注意缺少檔案擴展名。這在 Vue CLI 腳手架專案中有效，因為可以配置默認檔案擴展名。

在 Vite 中，匯入成功的路徑中需要檔案擴展名：

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

標籤：Vue.js Vue路由器 维特

上一篇：如何在此BootstrapVue表的列標題中添加上標？

下一篇：使用二頭肌添加AzureAppConfigurationStore值