在动态导入中如何正确传递字符串字面量路径参数

作者：袖梨 2026-06-30

本文讲解如何解决动态 import() 中因相对路径解析位置固定（以模块定义处为基准）导致的路径传参混乱问题，提供基于 __dirname + path.join 的可靠方案，并给出现代工程化替代建议。

本文讲解如何解决动态 `import()` 中因相对路径解析位置固定（以模块定义处为基准）导致的路径传参混乱问题，提供基于 `__dirname` + `path.join` 的可靠方案，并给出现代工程化替代建议。

在使用 ES 模块动态导入（import(...)）时，一个关键限制是：路径参数必须是静态字符串字面量（或可被构建工具静态分析的表达式），且其解析基准始终是该 import() 语句所在模块的文件位置，而非调用方位置。这正是你遇到问题的根本原因：

loadTranslationFiles("./path/to/dictionary") 在 foo.js 中调用，但 import(${pathname}/${lang}.json) 实际运行在 translation.js 内；
此时 pathname 被解释为相对于 ./path/to/utils/translation.js，而非 ./foo.js；
因此 "./path/to/dictionary" 对 translation.js 来说路径错误，而 "../../../path/to/dictionary" 才恰好指向正确位置。

✅ 正确解法：将路径计算权交还给被调用模块

最稳健的方式是不传递相对路径字符串，而是由 translation.js 自行构造绝对路径，利用 Node.js 的 __dirname（需确保运行环境支持）和 path.join：

// ./path/to/utils/translation.jsimport { join } from 'path';export const loadTranslationFiles = async (baseDirName) => {  const baseDir = join(__dirname, '..', '..', baseDirName); // 从 translation.js 出发向上定位  const languages = ['en', 'de', 'fr'];  const translations = {};  for (const lang of languages) {    try {      const module = await import(`${baseDir}/${lang}.json`);      translations[lang] = module.default;    } catch (err) {      console.warn(`Failed to load ${lang}.json:`, err.message);    }  }  return translations;};

调用方式变得清晰、可复用：

// ./foo.jsimport { loadTranslationFiles } from './path/to/utils/translation';// 传入相对于 project root 的子路径（逻辑上更直观）const translations = await loadTranslationFiles('path/to/dictionary');

⚠️ 注意事项：
__dirname 在纯 ESM 环境中不可用（ESM 无 __dirname），若项目使用 .mjs 或 type: "module"，需改用 fileURLToPath(import.meta.url)：
import { dirname, join } from 'path';import { fileURLToPath } from 'url';const __dirname = dirname(fileURLToPath(import.meta.url));
动态 import() 路径不能拼接变量（如 ${baseDir}/...），但 join() 生成的字符串是静态可分析的，Webpack/Vite 等工具能正确打包 JSON 文件；

建议添加 try/catch 处理缺失语言文件，避免单点失败中断全部加载。