VUE does not load page content when compiling

Question

I have a program made in VUE that works for me locally but stops working when compiling.

The idea is that within the initial VUE App.vue file I load content from other files, in this case the Home.vue file

App.vue

<template>
  <v-app>
    <v-app-bar app color="primary" dark>
      V.4.0
      <v-spacer></v-spacer>
       2022  
    </v-app-bar>
    
    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>

export default {
  name: 'App',
};

The index.js of the routes

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: function () {
      return import(/* webpackChunkName: "about" */ '../views/Home.vue')
    }
  },
  {
    path: '/llistat',
    name: 'Llistat',
    component: function () {
      return import(/* webpackChunkName: "about" */ '../views/Llistat_feina.vue')
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
</script>

the Home.vue

<template>
    <v-container>
      <h1>Bienvenido</h1>
    <router-link to="/Llistat">1. Llistat</router-link><br>
  </v-container>
</template>

<script>
  

  export default {
    name: 'Home',

    components: {
    },
  }
</script>

If I run it locally it works fine. Load the App.vue, find the path and insert the Home.vue

If I compile it and upload it to the server, it does not load the content of Home.vue, it only loads the code of App.vue

Any idea what might be going on? Thanks

Answer 1

You must configure your web server to serve index.html for all non-existent filenames instead of returning HTTP status code 404 - or to switch your VueRouter to hash mode instead of history. You must also properly set publicPath in vue.config.js and base in VueRouter - they must be the same and reflect the folder on the web server where your Vue application is being served from.