Vite(Vue3)中如何获取别名导入文件路径并实现动态别名？

核心结论 #

Vite的resolve.alias配置中的函数无法直接获取导入语句所在的文件路径——因为别名解析逻辑在模块解析早期执行，此时未传递导入文件的上下文信息。要实现你需要的动态别名效果，必须通过Vite插件的resolveId钩子完成。

解决方案：自定义Vite插件 #

以下是具体实现代码，通过插件拦截导入请求，根据导入文件路径动态解析#别名：

import path from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'dynamic-alias-plugin',
      resolveId(id, importer) {
        // 仅处理以#/开头的导入请求
        if (id.startsWith('#/') && importer) {
          // 获取导入文件所在的目录路径
          const importerDir = path.dirname(importer);
          // 拼接目标文件的相对路径
          const targetPath = id.slice(2); // 去掉开头的#/
          // 生成绝对路径并返回
          return {
            id: path.resolve(importerDir, targetPath),
            external: false // 标记为项目内文件，不按外部依赖处理
          };
        }
        // 其他导入请求交给Vite默认处理
        return null;
      }
    }
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      // 保留#的占位配置，避免Vite抛出别名未定义警告
      '#': path.resolve(__dirname, './src')
    }
  }
});

代码逻辑说明 #

• resolveId是Vite插件的核心钩子，接收两个关键参数：id为当前待解析的导入路径，importer就是发起导入请求的文件路径（即你需要的getImportingFilepath()返回值）。
• 当检测到导入路径以#/开头时，通过path.dirname(importer)获取导入文件所在目录，再拼接#/后的路径片段，生成目标文件的绝对路径。
• 返回的对象中，id指定解析后的绝对路径，external: false告知Vite这是项目内部文件，无需当作外部依赖处理。

验证效果 #

在src/module_a/some_script.js中写import "#/another_script.js"，会被解析为src/module_a/another_script.js；在src/module_b/some_script.js中写相同导入语句，会被解析为src/module_b/another_script.js，完全匹配你的需求。

补充说明 #

• 为什么不能用resolve.alias的函数？因为Vite执行别名函数时，仅传递别名本身、索引和原始请求路径，未提供导入文件的上下文，无法获取importer信息。
• 若需要更复杂的匹配规则（比如#后无/的场景），可直接在resolveId钩子中修改逻辑。

内容的提问来源于stack exchange，提问作者LJ S.A.