Vite技术问询：能否将所有工具配置文件移至子目录或单个JS文件

你完全可以把这些配置文件移到子目录，甚至部分整合，同时保留根目录执行命令的原有体验。以下是具体实现方案：

一、移到子目录（推荐，兼顾灵活性和整洁性） #

将所有配置文件放到config/子目录下，通过工具的配置继承、入口转发或命令参数指定来关联，完全不影响原有命令执行逻辑。

1. ESLint #

两种方式可选：

• 入口转发：在根目录创建.eslintrc.js，内容仅导入子目录的配置：

  module.exports = require('./config/.eslintrc.js');
  

  这样执行npm run lint和原来完全一样，不用修改scripts。
• 命令参数指定：在package.json的scripts里添加--config参数：

  "scripts": {
    "lint": "eslint . --config config/.eslintrc.js"
  }
  

2. Vite #

同样两种方式：

• 入口转发：根目录创建vite.config.js，导入子目录配置：

  export default require('./config/vite.config.js');
  

  直接执行vite dev/vite build即可，无需修改scripts。
• 命令参数指定：修改scripts：

  "scripts": {
    "dev": "vite --config config/vite.config.js",
    "build": "vite build --config config/vite.config.js"
  }
  

3. TypeScript（tsconfig.json） #

利用TypeScript的extends特性，根目录创建简化版tsconfig.json：

{
  "extends": "./config/tsconfig.json"
}

IDE会自动识别这个根目录文件，执行tsc命令也无需额外参数，直接读取子目录的完整配置。如果你的index.d.ts移到了config/，记得在config/tsconfig.json的include数组里加上：

"include": ["./**/*.d.ts", "../src/**/*"]

4. index.html #

如果想把它移出根目录（比如放到src/），可以在vite.config.js里配置root选项：

export default {
  root: './src',
  // 其他Vite配置
}

这样执行vite dev会自动加载src/index.html，和原来体验一致。如果把它算核心入口文件留在根目录也完全没问题。

最终目录结构示例 #

project-root/
├── package.json       # 必须留在根目录
├── LICENSE
├── README.md
├── src/
│   └── main.ts       # 应用代码
└── config/
    ├── .eslintrc.js
    ├── vite.config.js
    ├── tsconfig.json
    └── index.d.ts

二、整合到单个配置文件（局限性较大） #

由于不同工具的配置结构差异大，完全整合到一个JS文件需要给每个工具做入口转发，仅适合对极致整洁有需求的场景：

1. 创建config/global-config.js，把各工具的配置作为导出对象的属性：

module.exports = {
  eslint: {
    // ESLint完整配置
    env: { browser: true, es2021: true },
    extends: ['eslint:recommended'],
    parser: '@typescript-eslint/parser',
    // ...其他配置
  },
  vite: {
    // Vite完整配置
    server: { port: 3000 },
    // ...其他配置
  }
}

2. 根目录为每个工具创建入口文件：

• .eslintrc.js：module.exports = require('./config/global-config.js').eslint;
• vite.config.js：export default require('./config/global-config.js').vite;
• tsconfig.json：注意TypeScript不支持从JS文件导入配置，只能用extends指向JSON文件，所以无法整合到JS文件里，仍需单独放在config/目录，再用根目录的tsconfig.json继承。

这种方案虽然能减少文件数量，但配置可读性会下降，且TypeScript无法参与整合，因此不如子目录方案实用。

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