Laravel9集成Vue3时vue-good-table-next组件渲染报错排查

你遇到的问题来自两个核心配置错误：

• 控制台返回的重复挂载警告：id为app的宿主DOM节点被多次执行Vue挂载操作，要么是Blade模板里重复引入了编译后的app.js文件，要么是页面内存在其他脚本也对#app节点做了挂载，Vue不允许多个实例绑定同一个宿主容器。
• 数据表格不显示：你安装了vue-good-table-next依赖但没有完成组件注册，Vue无法识别<vue-good-table>自定义标签，自然无法渲染内容；同时你没有引入组件的默认样式文件，就算完成注册表格也会显示错乱。

1. 解决重复挂载问题 #

首先检查Blade模板（通常是resources/views/layouts/app.blade.php这类基础布局模板）：

• 确保编译后的js文件引入代码（旧版mix为<script src="{{ mix('js/app.js') }}"></script>）在整个页面只出现1次，不要在父模板、子模板里重复加载。
• 检查页面内有没有其他手写的createApp(...).mount('#app')脚本，如果有直接删除，只保留resources/js/app.js里的挂载逻辑即可。
• 如果确实需要在同一个页面挂载多个Vue实例，给不同实例绑定不同id的DOM容器，不要全部复用#app节点。

2. 注册vue-good-table-next组件 #

修改resources/js/app.js的入口配置，引入表格插件和对应样式，完成全局注册：

require('./bootstrap');

import { createApp } from "vue";
// 引入表格插件和默认样式
import VueGoodTablePlugin from 'vue-good-table-next';
import 'vue-good-table-next/dist/vue-good-table-next.css'
import datatableFisios from "./components/datatableFisios.vue";

const app = createApp({
    components: {
        datatableFisios,
    },
});
// 注册表格插件
app.use(VueGoodTablePlugin);
app.mount("#app");

3. 修正Blade模板的组件写法 #

确保渲染组件的Blade模板里存在id为app的根节点，组件名要转成短横线分隔格式（浏览器解析原生自定义元素不支持驼峰命名），参考写法：

<div id="app">
    <datatable-fisios></datatable-fisios>
</div>
<script src="{{ mix('js/app.js') }}"></script>

4. 重新编译前端资源 #

配置修改完成后，在项目根目录执行编译命令，清空浏览器缓存后刷新页面即可：

npm run dev
# 生产环境部署执行 npm run prod

• vue-good-table-next：你当前选用的类库本身足够应对常规需求，轻量易上手，内置排序、筛选、分页、自定义列模板能力，配置逻辑简单，适合快速开发常规后台表格场景。
• Element Plus 内置Table组件：如果项目整体使用Element Plus组件库，直接用自带的Table组件即可，和其他UI组件风格统一，生态完善，支持虚拟滚动、树形数据、行内编辑等常见复杂场景。
• TanStack Table（原Vue Table）：无头组件库，不带默认样式，完全可控，定制化自由度极高，适合需要高度匹配自有设计风格、自定义复杂交互的项目，缺点是需要自行编写样式和基础交互逻辑。
• vxe-table：功能覆盖最全的Vue企业级表格库，支持十万级大数据虚拟滚动、单元格编辑、数据导出、表单校验、行列冻结等能力，适合复杂中后台系统，缺点是包体积相对更大。

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