Ich versuche, mit Vue eine sehr einfache Website zu erstellen. Beim Ausführen npm runserve 时，所有使用的组件都会显示，当运行 npm run build ist die Seite leer.

Ich habe vue.config.js 文件并添加了 publicPath (wie in anderen Beiträgen gezeigt) angepasst, um das Problem völlig leerer Seiten und 404-Dateifehler zu lösen.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: '',
  transpileDependencies: true
})

Nach dem Hinzufügen von publicPath wird alles außer RenderView gerendert.

Meine App.vue-Datei sieht so aus:

<template>
  <div class="nav">
    <nav class="container">
      <div class="nav-wrapper">
        <router-link to="/" class="brand-logo">website name</router-link>
        <ul class="right">
          <li><router-link to="/" >Home</router-link></li>
          <li><router-link to="/contact-imprint" >Contact</router-link></li>
        </ul>
      </div>
    </nav>
  </div>

  <router-view/>

</template>

Die Dateipfade scheinen auch durcheinander zu sein, wenn man mit der Maus über RouterLinks fährt.

js-Fehlerkonsole ist noch leer.

router/index.js Die Datei sieht so aus:

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/contact-imprint',
    name: 'contact',
    component: () => import('../views/Contact.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

Wenn jemand weiß, was dieses Verhalten verursachen könnte, würde ich mich freuen, es zu hören. Vielen Dank im Voraus!