Vue3自定义组件test-a在PHP Blade页面不显示问题求助

你的问题核心在于三个JS文件中的Vue实例不是同一个引用，导致组件注册到了未挂载的实例上，而实际挂载的是另一个独立实例，同时需要确保脚本加载顺序正确。以下是具体解决方案：

1. 确保Vue实例全局共享（非模块化场景） #

如果直接通过普通脚本引入Vue，需要将创建的实例挂载到全局window对象，让其他文件能访问同一个实例：

main.js #

import { createApp } from 'vue'
// 将实例挂载到全局window对象
window.vueApp = createApp({})

component-test.js #

// 使用全局的vueApp实例注册组件
window.vueApp.component('test-a', {
  template: '<div>这是Test-A组件内容</div>'
})

main2.js #

// 挂载同一个全局实例
window.vueApp.mount('#app')

2. 严格控制脚本加载顺序 #

在Blade模板中，必须按创建实例 → 注册组件 → 挂载实例的顺序引入脚本，否则组件注册会在实例挂载之后执行，无法生效：

<!-- 先加载创建实例的脚本 -->
<script src="{{ asset('js/main.js') }}"></script>
<!-- 再加载注册组件的脚本 -->
<script src="{{ asset('js/component-test.js') }}"></script>
<!-- 最后加载挂载实例的脚本 -->
<script src="{{ asset('js/main2.js') }}"></script>

3. 检查组件使用规范 #

确保在#app容器内正确使用组件，Vue3中短横线命名的组件直接在模板中使用短横线形式：

<div id="app">
  <!-- 必须存在这个组件标签 -->
  <test-a></test-a>
</div>

4. 模块化方案（推荐，避免全局变量污染） #

如果项目支持ES模块，通过import/export共享实例更规范：

main.js #

import { createApp } from 'vue'
// 导出实例供其他文件引用
export const vueApp = createApp({})

component-test.js #

// 导入main.js中的实例
import { vueApp } from './main.js'

vueApp.component('test-a', {
  template: '<div>Test-A组件内容</div>'
})

main2.js #

import { vueApp } from './main.js'

vueApp.mount('#app')

此时Blade中的脚本需要添加type="module"属性：

<script type="module" src="{{ asset('js/main.js') }}"></script>
<script type="module" src="{{ asset('js/component-test.js') }}"></script>
<script type="module" src="{{ asset('js/main2.js') }}"></script>

额外排查点 #

• 确认Vue3的引入路径正确，控制台无404报错；
• 更新Vue开发者工具到最新版本，确保支持Vue3；
• 检查组件模板语法是否正确，比如是否有未闭合的标签。

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