Laravel中Vue组件无法在welcome.blade.php显示的求助

一、检查Blade文件的组件挂载与资源引入 #

• 确保存在与app.js挂载选择器匹配的DOM容器，比如：

  <div id="app">
      <example-component></example-component>
  </div>
  

• 确认正确引入Vite资源，开发/生产环境都要对应：

  @vite(['resources/js/app.js'])
  

• 组件标签名必须和app.js中注册的名称完全一致，比如注册的是example-component就不能用ExampleComponent（未配置自动注册时）。

二、验证Vite配置正确性 #

检查vite.config.js是否正确引入Vue插件并配置入口文件，示例正确配置：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

重点：必须确保vue插件已导入并启用，input数组包含app.js。

三、检查JS文件的组件注册与初始化 #

1. bootstrap.js：确认Vue实例创建方法已正确导出：

   import { createApp } from 'vue';
   window.createApp = createApp;
   

2. app.js：确保组件注册并完成根实例挂载：

   import './bootstrap';
   import { createApp } from 'vue';
   import ExampleComponent from './components/ExampleComponent.vue';
   
   const app = createApp({});
   app.component('example-component', ExampleComponent);
   app.mount('#app');
   

   若使用组件自动导入插件，需确认插件配置生效，否则必须手动注册组件。

四、检查Vue组件文件结构 #

ExampleComponent.vue必须有完整的模板结构，避免空模板或语法错误：

<template>
    <div class="example">
        <h1>Hello from Example Component!</h1>
    </div>
</template>

<script setup>
// 组件逻辑代码
</script>

<style scoped>
.example {
    padding: 2rem;
    background: #f5f5f5;
}
</style>

五、浏览器端排查 #

• 控制台错误：打开F12开发者工具，查看Console面板：
  • 若提示Vue is not defined，检查Network面板中app.js是否成功加载（状态码200）；
  • 若提示Failed to resolve component，说明组件未正确注册；
  • 若提示挂载目标不存在，确认Blade中#app容器存在。
• 网络请求：开发环境下确认Vite dev server（npm run dev启动）正常运行，资源请求地址正确。

六、额外排查步骤 #

• 强制刷新浏览器缓存（Ctrl+Shift+R），避免旧资源干扰；
• 确认Node版本符合要求（建议LTS版本18.x/20.x）；
• 删除node_modules和package-lock.json，重新执行npm install后再构建。

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