Laravel9+Vue3+InertiaJs生产构建后Vue组件无法读取props问题

以下是针对生产模式下组件无法访问props（如copyrightYear）的排查和解决步骤：

1. 确认组件Props的定义与使用方式 #

确保组件内的props声明规范，避免因生产压缩导致的变量名混淆或作用域丢失：

<script setup>
// 正确写法：先定义props对象，再按需使用
const props = defineProps({
  copyrightYear: {
    type: String,
    required: true
  }
})

// 模板中使用时，直接通过props.copyrightYear或解构后使用
// 避免直接解构defineProps返回值的写法（可能在压缩时出问题）
// 不推荐：const { copyrightYear } = defineProps(...)
</script>

<template>
  <div>{{ props.copyrightYear }}</div>
</template>

2. 检查Inertia数据传递的正确性 #

确认页面组件向子组件传递props时，使用正确的命名规范（Vue模板中需用kebab-case对应组件的camelCase props）：

<!-- 页面组件中传递props -->
<template>
  <!-- 正确：用kebab-case传递对应组件的copyrightYear -->
  <SiteFooter :copyright-year="$page.props.copyrightYear" />
</template>

同时验证$page.props中确实包含copyrightYear字段，可在页面组件中临时打印调试：

<script setup>
import { usePage } from '@inertiajs/vue3'
const page = usePage()
// 生产构建后可通过控制台查看
console.log('Page props:', page.props)
</script>

3. 排查Vite构建压缩的影响 #

临时关闭生产构建的代码压缩，验证是否为混淆导致的问题：
修改vite.config.js：

export default defineConfig({
  build: {
    minify: false // 关闭压缩
  },
  // 其他原有配置...
})

重新构建后若问题消失，说明是压缩工具（terser）导致变量名冲突。此时可配置terser保留props相关变量名，或确保组件props定义与模板引用的一致性。

4. 验证组件加载时机 #

若组件采用异步加载/代码分割方式，可能存在生产模式下渲染时机提前的问题：

• 尝试将异步引入改为同步引入，测试问题是否消失：

// 原异步引入
// const SiteFooter = defineAsyncComponent(() => import('./SiteFooter.vue'))

// 改为同步引入
import SiteFooter from './SiteFooter.vue'

5. 生产模式下的Vue DevTools验证 #

确保Vue DevTools能在生产模式下查看组件props，确认数据是否真的传入：
修改vite.config.js的Vue插件配置：

vue({
  devtools: true // 强制开启生产模式下的DevTools支持
})

构建后打开Vue DevTools，定位到报错组件，查看Props面板是否存在copyrightYear字段。

内容的提问来源于stack exchange，提问作者Mark J Horninger