应统一使用小写路径命名与导入,并在本地开发阶段通过case-sensitive-paths-webpack-plugin、ESLint的import/no-unresolved规则及Windows项目级大小写敏感设置,提前暴露大小写不匹配问题。

ES Modules 在 Linux 和部分构建环境(如 CI/CD)中严格区分路径大小写,而 Windows/macOS 默认不敏感,这会导致本地开发正常、线上构建失败。核心不是“怎么兼容”,而是“让开发环境提前暴露问题”。
统一用小写路径命名与导入
这是最简单也最有效的约定。所有文件名、目录名、导入语句全部使用小写字母加短横线(kebab-case),避免 Components、Utils、Header.vue 等混合大小写写法。
- ✅ 推荐:./components/button.js、./assets/icons/home.svg、import Button from './components/button.js'
- ❌ 避免:./Components/Button.vue、./Assets/logo.png、import Header from '@/Layouts/Header.vue'
在 Webpack 构建时主动拦截错误
别等部署到服务器才报错,应在本地 build 阶段就卡住。用 case-sensitive-paths-webpack-plugin 实现路径大小写校验:
- 安装:
npm install --save-dev case-sensitive-paths-webpack-plugin - 配置:在
webpack.config.js或vue.config.js的plugins数组中加入new CaseSensitivePathsPlugin() - 效果:一旦 import 路径与磁盘文件名大小写不一致,构建立即中断并提示具体位置
用 ESLint 在编码阶段实时提醒
配合 eslint-plugin-import 的 import/no-unresolved 规则,开启大小写检查:
- 确保已配置
eslint-import-resolver-webpack指向项目 Webpack 解析逻辑 - 在
.eslintrc.js中启用:"import/no-unresolved": ["error", { "caseSensitive": true }] - VS Code 安装 ESLint 插件后,写错路径如
import api from '@/Services/api.js'(实际是services/api.js),编辑器立刻标红
Windows 开发者可启用项目级大小写敏感
这不是必须项,但能让你本地行为和 Linux 一致,提前发现多数路径问题:
- 以管理员身份打开 PowerShell,进入项目根目录(如
D:\work\my-app) - 执行:
fsutil file setCaseSensitiveInfo . enable - 验证生效:
fsutil file queryCaseSensitiveInfo .应返回Case sensitive attribute on directory is enabled - 之后
echo a > A.txt会提示“文件已存在”,说明系统已按大小写区分文件
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











