能否在Vite中为多个路径配置单个别名？

我可以按如下方式配置vite.config.ts来使用别名：

export default defineConfig(({ mode }) => {
    return {
        resolve: {
            alias: {
                'list': 'src/Components/List/Index'
            },
            preserveSymlinks: true
        },
        plugins: [react()],
    }
})

但我想了解是否可以用一个别名指向两个或更多目录？例如我有如下目录结构：

src
   Components
       List
           Row.ts
           Index.ts
   Base
       Api.ts
       Index.ts

我希望能通过如下方式导入：

import { Row, Api } from 'list'

是否可行？

不行，Vite的别名机制是一对一的路径映射，无法直接让单个别名同时指向多个不同目录。不过你可以通过以下方案实现想要的导入效果：

1. 在src目录下创建一个聚合导出文件，比如src/list.ts，把需要的模块统一在这里导出：

// src/list.ts
// 直接导出目标模块
export { Row } from './Components/List/Row';
export { Api } from './Base/Api';

// 若对应目录的Index.ts已经导出了目标内容，也可以批量导入
// export * from './Components/List/Index';
// export * from './Base/Index';

2. 修改vite.config.ts的别名配置，让list指向这个聚合文件：

export default defineConfig(({ mode }) => {
    return {
        resolve: {
            alias: {
                'list': 'src/list.ts' // 指向新创建的聚合文件
            },
            preserveSymlinks: true
        },
        plugins: [react()],
    }
})

完成以上配置后，你就可以通过import { Row, Api } from 'list'的方式导入两个模块了。这种方式本质是通过中间聚合文件来整合多个目录的导出内容，再用别名指向这个文件，间接实现了“一个别名对应多个来源”的需求。

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