Vue+InertiaJS项目全局组件注册函数仅Windows正常Mac运行报错原因

问题根因 #

这个问题是两个常见跨系统开发的坑叠加导致的：

1. require.context传参逻辑错误
   你写的'./components' || './components/core' || './components/base'是无效逻辑，JS中非空字符串为真值，所以这个表达式永远只会返回第一个值./components，后面两个目录路径根本不会被传入扫描逻辑，相当于你只配置了扫描./components这一个目录。
2. 文件系统大小写敏感性差异
   Windows的NTFS文件系统默认是大小写不敏感的，代码里写./components和./Components会被识别为同一个目录；而MacOS的APFS文件系统默认或开发环境下通常是大小写敏感的，加上git默认配置会忽略大小写变更，就会出现路径匹配失败：

• Windows上即使本地组件目录是大写开头Components，代码里写小写./components也能正常识别
• 代码提交到git后，git不会记录目录名的大小写差异，Mac拉取代码后实际目录名和代码里写的路径大小写不匹配，直接抛出解析错误。

修复方案 #

1. 修正多目录扫描逻辑 #

要扫描多个目录不能用||拼接，需要分别创建多个require.context实例逐个处理：

function registerGlobalComponents (app) {
  // 定义所有需要扫描的组件目录
  const componentDirs = [
    './components',
    './components/core',
    './components/base'
  ]
  componentDirs.forEach(dir => {
    const requireComponent = require.context(
      dir,
      true,
      /\.vue$/
    )
    for (const file of requireComponent.keys()) {
      const componentConfig = requireComponent(file);
      const name = file
        .replace(/index.js/, '')
        .replace(/^\.\//, '')
        .replace(/\.\w+$/, '');
      const componentName = upperFirst(camelCase(name));
      app.component(componentName, componentConfig.default);
    }
  })
}

2. 统一路径大小写 #

• 检查resources/js下的组件目录名，确保和代码里写的./components完全一致，都是小写
• 配置git不忽略大小写，避免后续提交出现大小写问题：
  git config core.ignorecase false
• 如果之前已经提交了大写的目录名，执行以下命令修正git记录：
  git mv -f Components components
  提交推送后两台设备拉取最新代码即可正常运行。

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