如何在Turborepo monorepo中共享Vue项目的Vite配置？

问题背景 #

基于Turborepo搭建包含多Vue项目的monorepo，需要在所有应用间共享Vite基础配置，要求保留.ts文件格式，无需添加构建步骤（避免开发开销、保持代码跳转能力）。

当前配置结构 #

共享配置包目录 #

packages/
  configs/
    package.json
    index.ts
    vite.config.base.ts

各文件内容 #

1. packages/configs/package.json

{
  "name": "@monorepo/configs",
  "version": "0.0.1",
  "private": true,
  "type": "module",
  "main": "index.ts",
  "types": "index.ts",
  "files": [
    "./src/tsconfig.base.json",
    "./src/vite.config.base.js"
  ]
}

2. packages/configs/vite.config.base.ts

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'

export const ViteConfigBase = defineConfig({
  resolve: {
    alias: {
      // 自定义别名配置
    }
  }
})

3. packages/configs/index.ts

export { ViteConfigBase } from './src/vite.config.base' 

尝试过程与错误 #

1. 直接从src目录导入基础配置 #

应用的vite.config.ts代码：

import { fileURLToPath, URL } from 'node:url'
import { ViteConfigBase } from '@monorepo/configs/src/vite.config.base'
import { defineConfig, mergeConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(mergeConfig(
  ViteConfigBase,
  {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  }
))

执行npm run dev后报错：

> @monorepo/sandbox@0.0.0 dev
> vite

failed to load config from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts
error when starting dev server:
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\user\Desktop\Code\Personal\monorepo\packages\Config\src\vite.config.base.js from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts not supported.
Instead change the require of vite.config.base.js in C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts to a dynamic import() which is available in all CommonJS modules.

2. 从configs包入口index导入 #

修改应用的vite.config.ts：

import { fileURLToPath, URL } from 'node:url'
import { ViteConfigBase } from '@monorepo/configs'
import { defineConfig, mergeConfig } from 'vite'

// 其他配置...

执行命令后报错：

> @monorepo/sandbox@0.0.0 dev
> vite

failed to load config from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts
error when starting dev server:
C:\Users\user\Desktop\Code\Personal\monorepo\packages\Config\index.ts:1
export { ViteConfigBase } from './src/vite.config.base' 
^^^^^^

SyntaxError: Unexpected token 'export'

3. 添加type: module后的新错误 #

在configs包的package.json中已存在type: module，但仍出现：

> @monorepo/sandbox@0.0.0 dev
> vite

failed to load config from C:\Users\user\Desktop\Code\Personal\monorepo\apps\Sandbox\vite.config.ts
error when starting dev server:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\user\Desktop\Code\Personal\monorepo\packages\Config\index.ts

解决方案（无需构建） #

步骤1：修正共享配置包的package.json #

1. 修正files字段，匹配实际存在的文件：

"files": [
  "index.ts",
  "vite.config.base.ts"
]

2. 添加exports字段，明确ESM导出路径与类型文件：

"exports": {
  ".": {
    "types": "./index.ts",
    "import": "./index.ts"
  },
  "./vite.config.base": {
    "types": "./vite.config.base.ts",
    "import": "./vite.config.base.ts"
  }
}

步骤2：修正index.ts的导入路径 #

原路径中的./src/是错误的，修改为：

export { ViteConfigBase } from './vite.config.base' 

步骤3：调整应用的Vite配置 #

由于Node.js默认不直接解析.ts文件，且Vite存在文件系统访问限制，采用以下两种方式解决：

方式一：使用异步动态导入

利用Vite支持异步配置的特性，通过动态导入加载TS格式的基础配置：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig, mergeConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(async () => {
  const { ViteConfigBase } = await import('@monorepo/configs/vite.config.base')
  return mergeConfig(
    ViteConfigBase,
    {
      plugins: [vue()],
      resolve: {
        alias: {
          '@': fileURLToPath(new URL('./src', import.meta.url))
        }
      },
      server: {
        fs: {
          allow: ['../../packages'] // 允许访问monorepo的packages目录
        }
      }
    }
  )
})

方式二：配置TS模块解析（支持顶层导入）

1. 在monorepo根目录创建tsconfig.json，配置模块解析规则：

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "module": "ESNext",
    "target": "ESNext",
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["packages/**/*.ts", "apps/**/*.ts"]
}

2. 应用的vite.config.ts直接导入即可：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig, mergeConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { ViteConfigBase } from '@monorepo/configs'

export default defineConfig(mergeConfig(
  ViteConfigBase,
  {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    server: {
      fs: {
        allow: ['../../packages']
      }
    }
  }
))

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