添加export default后Laravel Inertia Vue组件显示空白页

1. 检查Head组件的导入与使用规范 #

• 确保正确导入Inertia的Head组件，Vue3环境下导入语句应为：import { Head } from '@inertiajs/vue3'，Vue2则对应import { Head } from '@inertiajs/vue2'。
• 模板中使用<Head>必须放在单个根节点内部，不能直接暴露在根节点外，示例：

<template>
  <div class="page-container">
    <Head title="数据列表" />
    <!-- DataTable、ConfirmDialog 等组件内容 -->
  </div>
</template>

2. 避免使用JavaScript关键字作为方法名 #

delete是JavaScript的保留关键字，直接用它作为方法名会导致语法解析错误，引发页面渲染失败。将方法名改为deleteItem或handleDelete：

Options API 示例： #

export default {
  methods: {
    // 错误写法：使用了关键字delete
    // delete() { ... },
    // 正确写法
    deleteItem(id) {
      // 你的删除逻辑，比如调用ConfirmDialog确认
    }
  }
}

Composition API 示例： #

<script setup>
// 错误写法：const delete = () => { ... }
const deleteItem = (id) => {
  // 删除逻辑
}
</script>

3. 确认PrimeVue组件的注册状态 #

• 全局注册：在项目入口文件（如resources/js/app.js）中确保已注册DataTable和ConfirmDialog：

import PrimeVue from 'primevue/config'
import DataTable from 'primevue/datatable'
import ConfirmDialog from 'primevue/confirmdialog'

createInertiaApp({
  setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(PrimeVue)
      .component('DataTable', DataTable)
      .component('ConfirmDialog', ConfirmDialog)
      .mount(el)
  }
})

• 局部注册：若未全局注册，需在组件内显式导入并注册组件：

<script>
import DataTable from 'primevue/datatable'
import ConfirmDialog from 'primevue/confirmdialog'

export default {
  components: { DataTable, ConfirmDialog },
  methods: {
    deleteItem() { ... }
  }
}
</script>

4. 检查模板根节点结构 #

Vue组件模板必须有唯一根节点（Vue3可使用<template>作为根片段），如果添加export default后模板存在多个同级根元素，会导致渲染异常，进而触发Head组件解析错误。

5. 清除缓存并重新编译 #

• 运行npm run dev重新编译前端资源
• 强制刷新浏览器（Ctrl+Shift+R）清除缓存，避免旧编译文件干扰

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