Vue3 - RouterLink affiche la progression de la construction mais pas RouterView

Question

J'essaie de créer un site Web très simple en utilisant vue. Lors de l'exécution npm runserve 时，所有使用的组件都会显示，当运行 npm run build le site est vide.

J'ai adapté vue.config.js 文件并添加了 publicPath (comme indiqué dans d'autres articles) pour résoudre le problème des pages complètement vierges et des erreurs de fichiers 404.

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

Après l'ajout de publicPath, tout sauf le RenderView sera rendu.

Mon fichier App.vue ressemble à ceci :

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

Les chemins de fichiers semblent également être perturbés lorsque vous survolez RouterLinks.

La console d'erreur

js est toujours vide.

router/index.js Le fichier ressemble à ceci :

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

Si quelqu'un sait ce qui pourrait causer ce comportement, je serais heureux de l'entendre. Merci beaucoup d'avance!

Answer 1

Eh bien, cela m'a pris beaucoup de temps. Apparemment, vous ne pouvez pas tester l'application vue directement à partir du dossier dist. J'ai déplacé tous les fichiers vers le répertoire de mon serveur (exécutant Apache) et tout fonctionne comme prévu.