Vue3 - RouterLink shows in build progress but not RouterView

Question

I'm trying to build a very simple website using vue. When running npm runserve all used components are shown, when running npm run build the site is empty.

I adapted the vue.config.js file and added publicPath (as shown in other posts) to resolve the issue of completely blank pages and 404 file errors.

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

After adding publicPath, everything except RenderView will be rendered.

My App.vue file looks like this:

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

The file paths also seem to be messed up when hovering over RouterLinks.

js Error console is still empty.

router/index.js The file looks like this:

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

If anyone knows what could cause this behavior, I'd be happy to hear it. Thank you very much in advance!

Answer 1

Well, this took a long time for me. Apparently you can't test vue application directly from dist folder. I moved all files to my server directory (running apache) and everything works as expected.