如何让Vite的optimizeDeps.include支持相对路径（无需别名）？

问题原因 #

Vite 的 optimizeDeps.include 配置对路径的解析逻辑和日常 ES 模块 import 的相对路径规则存在差异：

• ./dist/foobar.js、/dist/foobar.js这类带相对/绝对前缀的路径，会被当作模块标识符按 Node.js 模块解析规则查找（优先检索 node_modules），而非直接映射文件系统路径，因此会出现解析失败。
• dist/foobar.js能生效是因为 Vite 会尝试从项目根目录定位该文件，但这个逻辑和 import 时的路径解析不兼容，导致后续直接用dist/test.js导入时报错。

不用别名的解决方案 #

方案1：用绝对路径配置 optimizeDeps.include，import 用相对路径

借助 Node.js 的path模块拼接项目根目录的绝对路径，让 optimizeDeps 精准定位文件，同时 import 时遵循 ES 模块的相对路径规则：

vite.config.js：

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

export default defineConfig({
  optimizeDeps: {
    include: [
      // 拼接项目根目录下的 dist/foobar.js 绝对路径
      path.resolve(__dirname, './dist/foobar.js')
    ]
  }
})

App.vue：

// 用相对当前组件的路径导入
import * as test from './dist/test.js'

方案2：扩展 Vite 的解析根目录，统一路径规则

把dist目录添加到 Vite 的解析根目录列表中，这样无论是optimizeDeps.include还是 import，都能直接用dist/xxx路径：

vite.config.js：

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    // 把 dist 目录加入解析根目录，和项目根目录同级
    root: [process.cwd(), `${process.cwd()}/dist`]
  },
  optimizeDeps: {
    include: ['dist/foobar.js']
  }
})

注意：如果dist目录下的文件名和 node_modules 中的模块名重名，会出现解析冲突，需要谨慎使用。

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