Vue3项目构建后首页空白，需点击路由链接才显示内容

你的问题出在首页路由的路径配置上：

开发环境下，本地服务器对路径的解析会兼容空路径（''）和根路径（/），所以能正常匹配到首页组件；但生产构建后，服务器返回的是标准根路径请求（/），Vue Router的createWebHistory模式不会自动将/匹配到空路径规则，导致RouterView没有渲染任何内容，只有手动触发路由跳转（点击链接）时才会加载对应组件。

修复方案 #

方案1：直接将首页路由路径改为根路径（推荐） #

修改路由文件中的首页path为/，确保根路径请求能直接匹配到首页组件：

import { createRouter, createWebHistory } from 'vue-router'
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [ 
    {
      path: '/', // 替换原有的空路径''
      name: 'Accueil',
      component: () => import('../views/HomeView.vue'),
    },
    {
      path: '/menu',
      name: 'Carte',
      component: () => import('../views/MenuView.vue'),
    }
  ]
})
 
export default router

方案2：添加空路径重定向（兼容场景） #

如果需要保留空路径的匹配规则，可以添加一条重定向规则，将空路径请求导向根路径：

import { createRouter, createWebHistory } from 'vue-router'
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [ 
    {
      path: '',
      redirect: '/' // 新增重定向规则
    },
    {
      path: '/',
      name: 'Accueil',
      component: () => import('../views/HomeView.vue'),
    },
    {
      path: '/menu',
      name: 'Carte',
      component: () => import('../views/MenuView.vue'),
    }
  ]
})
 
export default router

额外检查 #

确认你的构建配置文件（如vite.config.js）中的base选项与import.meta.env.BASE_URL保持一致，避免路径解析冲突。

内容的提问来源于stack exchange，提问作者Julien Quentier