Vue3 - Build Progress отображает RouterLink, но не RouterView

Я пытаюсь создать очень простой веб-сайт, используя vue. При запуске npm run serve отображаются все используемые компоненты, при запуске npm run build сайт был пуст.

Я адаптировал файл vue.config.js и добавил publicPath, как показано в других сообщениях, чтобы избавиться от проблемы с полностью пустой страницей и ошибками 404 файла.

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

после добавления publicPath визуализируется все, кроме RenderView.

Мой файл App.vue выглядит так:

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

При наведении курсора на RouterLinks путь к файлу также кажется перепутанным.

Консоль ошибок js остается пустой.

router/index.js файл выглядит так:

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

Если у кого-то есть идеи, почему такое поведение вызвано, я был бы очень рад услышать. заранее большое спасибо!