Vue3 - RouterLink menunjukkan dalam kemajuan binaan tetapi bukan RouterView

Question

Saya cuba membina laman web yang sangat mudah menggunakan vue. Apabila berjalan npm runserve 时，所有使用的组件都会显示，当运行 npm run build tapak kosong.

Saya menyesuaikan vue.config.js 文件并添加了 publicPath (seperti yang ditunjukkan dalam siaran lain) untuk menyelesaikan masalah halaman kosong sepenuhnya dan ralat 404 fail.

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

Selepas menambah publicPath, semuanya kecuali RenderView akan dipaparkan.

Fail App.vue saya kelihatan seperti ini:

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

Laluan fail juga kelihatan kucar-kacir apabila melayang di atas RouterLinks.

konsol ralat js masih kosong.

router/index.js Fail kelihatan seperti ini:

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

Jika sesiapa tahu apa yang boleh menyebabkan tingkah laku ini, saya akan gembira mendengarnya. Terima kasih banyak-banyak!

Answer 1

Nah, ini mengambil masa yang lama untuk saya. Nampaknya anda tidak boleh menguji aplikasi vue terus dari folder dist. Saya mengalihkan semua fail ke direktori pelayan saya (menjalankan apache) dan semuanya berfungsi seperti yang diharapkan.