Vue3 - Build Progress displays RouterLink but not RouterView

Question

I'm trying to build a very simple website using vue. When running npm run serve all components used get displayed, when running npm run build the site was empty.

I adapted the vue.config.js file and added the publicPath as seen in other posts to get rid of the issue with a completely empty page and 404 file errors.

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

after adding the publicPath everything but the RenderView get's 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>

When hovering over the RouterLinks the File Path seems messed up as well.

The js Error Console remains empty.

The router/index.js 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 has some ideas why this behaviour is caused I'd be very happy to hear. thank you very much in advance!

Answer 1

well, this took quite a while for me. apparently you cannot test the vue app directly from your dist folder. I moved all files to my server directory (running apache) and everything worked as it should.