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

Question

我正在尝试使用 vue 构建一个非常简单的网站。当运行 npm run serve 显示所有使用的组件时，当运行 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) 并且一切正常。

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

Vue3 - Build Progress displays RouterLink but not RouterView

vue.js

vuejs3