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），一切都按預期工作。