解决 Linux 部署中的文件大小写问题

llq_3502025-08-09 14:46

问题背景

在本地开发环境（Windows/macOS）一切正常，但部署到 Linux 服务器后出现模块加载错误，核心原因是：

Linux 文件系统严格区分大小写

本地开发时 import Component from './MyComponent' 能加载 mycomponent.js

但部署后要求文件名必须完全匹配大小写：MyComponent.js

解决方案

1. ESLint 代码层检测

在编写阶段捕获错误：

javascript 复制代码

// .eslintrc.js
module.exports = {
  settings: {
    "import/resolver": {
      // 指向 Webpack 配置文件 让 ESLint 理解 Webpack 的模块解析规则
      webpack: { config: "./webpack.base.js" } 
    }
  },
  rules: {
    "import/no-unresolved": ["error", { 
      caseSensitive: true // 关键配置
    }]
  }
}

2. Webpack 构建层检测

在编译阶段阻断错误：

javascript 复制代码

// webpack.base.js
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');

module.exports = {
  plugins: [
    new CaseSensitivePathsPlugin() // 构建时大小写校验
  ]
};

配置要求

工具	安装依赖	核心配置
ESLint	`eslint-plugin-import` `eslint-import-resolver-webpack`	`caseSensitive: true`
Webpack	`case-sensitive-paths-webpack-plugin`	`new CaseSensitivePathsPlugin()`