Vue3 - RouterLink显示在构建进度中，但不显示RouterView

Question

我正在尝试使用 vue 构建一个非常简单的网站。 当运行 npm runserve 时，所有使用的组件都会显示，当运行 npm run build 时，该站点是空的。

我改编了 vue.config.js 文件并添加了 publicPath （如其他帖子中所示），以解决完全空白页面和 404 文件错误的问题。

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

添加 publicPath 之后，除了 RenderView 之外的所有内容都会被渲染。

我的 App.vue 文件如下所示：

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

当鼠标悬停在 RouterLinks 上时，文件路径似乎也混乱了。

js 错误控制台仍为空。

router/index.js 文件如下所示：

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

如果有人知道为什么会导致这种行为，我会很高兴听到。 预先非常感谢您！

Answer 1

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