基于Yarn Workspaces的Monorepo中Vite如何配置同别名指向不同路径

解决方案 #

你原来的配置无法生效是因为写死的相对路径是相对于根目录vite.config.ts的位置，不会随调用方所在包动态变化，按下面两个步骤调整即可：

步骤1：修改根目录vite.config.ts配置 #

利用Vite alias支持的自定义解析器，根据导入文件的所在路径动态匹配对应包的composables目录：

import { defineConfig } from 'vite'
import path from 'path'
import { fileURLToPath } from 'url'

// ESM格式配置需要手动获取__dirname，CommonJS格式可直接用内置__dirname
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const packagesRoot = path.resolve(__dirname, 'packages')

export default defineConfig({
  resolve: {
    alias: [
      {
        find: '@composables',
        // 自定义解析逻辑
        customResolver(source, importer) {
          // 跳过无导入源的场景
          if (!importer || !importer.startsWith(packagesRoot)) return
          // 提取导入文件所属的包名
          const relativePath = path.relative(packagesRoot, importer)
          const packageName = relativePath.split(path.sep)[0]
          // 拆分别名后的剩余路径，支持@composables/xxx的导入
          const suffix = source.replace('@composables', '').replace(/^\/|\/$/g, '')
          // 返回对应包的composables目录路径
          return path.resolve(packagesRoot, packageName, 'src/composables', suffix)
        }
      }
    ]
  }
})

步骤2：配置各包的tsconfig.json路径别名 #

避免TS类型报错，在每个子包的tsconfig.json的compilerOptions中添加如下配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@composables": ["./src/composables/index.ts"],
      "@composables/*": ["./src/composables/*"]
    }
  }
}

因为每个子包的tsconfig路径是相对于自身文件所在目录，所以无需为每个包单独修改配置，直接复制粘贴即可生效。

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