Laravel 9中Blade模板通过Vite加载Vue组件失败求助

1. 修正Vue实例挂载范围问题 #

你的<welcome-main-component>放在了<div id="app">外部，但Vue实例通过app.mount('#app')仅能管理挂载元素内部的组件，外部的组件不会被Vue解析渲染。

修改welcome.blade代码，将组件移到#app容器内：

<div id="app">
    @if (Route::has('login'))
        <div class="d-flex justify-content-between px-2">
            <div>logo</div>
            <div class="mt-3">
                @auth
                    <a class="m-3 button-welcome" href="{{ url('/home') }}">Home</a>
                @else
                    <a href="{{ route('login') }}" class="mx-3 button-welcome">sign in</a>

                    @if (Route::has('register'))
                        <a href="{{ route('register') }}" class="button-welcome">register</a>
                    @endif
                @endauth
            </div>
        </div>
    @endif
    <!-- 将组件移到#app内部 -->
    <welcome-main-component/>
</div>

2. 排查组件注册冲突 #

你的app.js中同时存在手动注册和批量自动注册两种方式：

• 手动注册了welcome-main-component
• 通过import.meta.glob批量注册所有.vue组件，会将WelcomeMainComponent.vue注册为驼峰式的WelcomeMainComponent组件名

两种注册方式可能存在优先级冲突，导致组件无法正常识别。可以删除手动注册的代码，仅保留批量注册：

// 删掉以下两行手动注册代码
// import WelcomeMainComponent from './components/WelcomeMainComponent.vue';
// app.component('welcome-main-component', WelcomeMainComponent);

3. 清除Vite构建缓存 #

Laravel 9使用Vite作为前端构建工具，缓存可能导致组件未更新。执行以下命令重置构建：

# 生产环境重新构建
npm run build

# 开发环境重启Vite服务
npm run dev

4. 简化组件代码排查内部错误 #

虽然控制台无报错，但组件内部的隐性逻辑错误可能导致渲染失败。暂时简化WelcomeMainComponent.vue的代码，测试基础渲染是否正常：

<template>
    <div class="test-content">WelcomeMainComponent 测试内容</div>
</template>

<script setup>
// 暂时移除所有复杂逻辑
</script>

<style scoped>
.test-content {
    color: red;
    font-size: 24px;
}
</style>

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