如何解决本地开发与线上Linux路径大小写不匹配报错问题？

本文共计689个文字，预计阅读时间需要3分钟。

这是最常见的大小写不匹配错误：

• 立刻检查控制台报错里提到的路径，和磁盘上真实文件名逐字符比对（注意 Components vs components、Button.vue vs button.vue）
• 用 VS Code 全局搜索 import.*Button 或 from.*@/Components，批量修正导入语句
• 图片、字体、JSON 等静态资源引用同理：./Assets/logo.png → 改为 ./assets/logo.png

Webpack 构建时怎么提前拦截大小写错误

等部署到 Linux 才发现路径错，已经晚了。应该让构建过程自己“卡住”——用 case-sensitive-paths-webpack-plugin 在本地就报错。

• 安装插件：npm install --save-dev case-sensitive-paths-webpack-plugin
• 在 webpack.base.js 或 vue.config.js 的 plugins 数组里加一行：new CaseSensitivePathsPlugin()
• 启动 npm run build，任何大小写不一致的 import 都会立刻中断并提示具体路径

ESLint 怎么在写代码时就提醒路径大小写问题

靠人眼盯文件名太容易漏，尤其团队协作时。用 eslint-plugin-import 的 import/no-unresolved 规则，配合 Webpack 解析配置，能实时校验。

• 确保已配好 eslint-import-resolver-webpack，指向你的 Webpack 配置（如 webpack.base.js）
• 在 .eslintrc.js 中启用："import/no-unresolved": ["error", { caseSensitive: true }]
• VS Code 装好 ESLint 插件后，写错路径如 import Header from '@/Layouts/Header'（实际是 layouts/header.vue），编辑器下方立刻标红

Windows 开发者要不要给项目目录开大小写敏感

可以开，但只建议对当前项目目录单独启用，不是全局改系统。这样本地行为就和 Linux 一致，很多问题提前暴露。

• 以管理员身份打开 PowerShell，cd 进入你的项目根目录（如 D:\work\my-app）
• 执行：fsutil file setCaseSensitiveInfo . enable
• 验证：fsutil file queryCaseSensitiveInfo . 应返回 Case sensitive attribute on directory ... is enabled
• 之后尝试 echo test > a.txt && echo test2 > A.txt，会提示“文件已存在”——说明生效了

别忘了 Git 也得同步处理：如果之前提交过 Components 和 components 两个不同大小写的目录，Git 可能没意识到它们是冲突的，得手动清理历史记录。这点最容易被跳过。