Vite+ReactTS项目lint-staged构建报错，npm run build正常求助

问题现象 #

直接执行npm run build可正常完成生产构建，但通过lint-staged运行npm run build时，出现错误：

Could not resolve entry module "src/config/axios-interceptor.ts/index.html".

问题原因 #

lint-staged默认会将匹配到的暂存文件路径作为参数传递给后续执行的命令。如果你的lint-staged配置中，把npm run build放在了针对*.ts/*.tsx文件的任务列表里，lint-staged会把这些TS文件的路径传给vite build命令。

Vite在接收到额外的文件参数时，会错误地将该文件路径当作入口目录，尝试去里面查找index.html，从而出现上述找不到文件的错误。

解决方法 #

方法1：调整lint-staged配置，避免build命令接收文件参数 #

将npm run build从针对单个文件的任务中移出，改为独立的全局任务，或者通过--截断参数传递：

示例配置（.lintstagedrc.json）

{
  "*.+(jsx|ts|tsx)": ["npm run lint"],
  "*.+(json|md)": ["prettier --write"],
  "*": ["npm run build"]
}

或者，如果你希望在lint通过后再执行build，可以用串联命令：

{
  "*.+(jsx|ts|tsx)": ["npm run lint && npm run build --"],
  "*.+(json|md)": ["prettier --write"]
}

这里的--会阻止lint-staged将后续的文件参数传递给npm run build。

方法2：在Vite配置中明确指定入口文件 #

在vite.config.ts中添加build.rollupOptions.input，强制指定项目入口为根目录的index.html，即使Vite接收到额外参数也会使用该入口：

import path from 'node:path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: /^~(.+)/,
        replacement: path.join(process.cwd(), 'node_modules/$1'),
      },
      {
        find: /^src(.+)/,
        replacement: path.join(process.cwd(), 'src/$1'),
      },
    ],
  },
  server: {
    port: 3000,
  },
  preview: {
    port: 3000,
  },
  // 添加以下配置
  build: {
    rollupOptions: {
      input: {
        main: path.resolve(__dirname, 'index.html'),
      },
    },
  },
});

方法3：优化lint-staged执行顺序（可选） #

如果不需要每次提交都执行全量构建，可以考虑只在lint和格式检查通过后再执行build，或者使用concurrent: false确保任务按顺序执行：

{
  "concurrent": false,
  "*.+(jsx|ts|tsx)": ["npm run lint"],
  "*.+(json|md)": ["prettier --write"],
  "*": ["npm run build"]
}

内容的提问来源于stack exchange，提问作者Hue Minh Nguyen