Vue3 – RouterLink wird im Build-Fortschritt angezeigt, aber nicht RouterView

Question

Ich versuche, mit Vue eine sehr einfache Website zu erstellen. Beim Ausführen npm runserve 时，所有使用的组件都会显示，当运行 npm run build ist die Seite leer.

Ich habe vue.config.js 文件并添加了 publicPath (wie in anderen Beiträgen gezeigt) angepasst, um das Problem völlig leerer Seiten und 404-Dateifehler zu lösen.

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

Nach dem Hinzufügen von publicPath wird alles außer RenderView gerendert.

Meine App.vue-Datei sieht so aus:

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

Die Dateipfade scheinen auch durcheinander zu sein, wenn man mit der Maus über RouterLinks fährt.

js-Fehlerkonsole ist noch leer.

router/index.js Die Datei sieht so aus:

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

Wenn jemand weiß, was dieses Verhalten verursachen könnte, würde ich mich freuen, es zu hören. Vielen Dank im Voraus!

Answer 1

嗯，这对我来说花了很长时间。显然你无法直接从 dist 文件夹测试 vue 应用程序。我将所有文件移至我的服务器目录（运行 apache），一切都按预期工作。