JavaScript动态导入不支持任意表达式路径，需通过静态可分析模板字符串、预定义映射表或路由配置实现安全动态加载，严禁拼接用户输入或使用eval。
JavaScript 动态导入（import()）本身不支持完全任意的表达式作为模块路径，但可以通过几种安全、可控的方式处理“动态路径”的模块加载需求。关键在于：路径必须在运行时能被静态分析器识别为确定值，或通过预定义的映射/白名单机制规避语法限制。
使用模板字符串拼接（仅限静态可推断路径）
当路径由固定前缀 + 有限变量组成，且变量取值在构建时可枚举（如已知的文件名列表），Webpack、Vite 等打包工具能静态分析并预打包对应模块：
- ✅ 支持：
import(`./components/${name}.js`)—— 若name来自一个明确的字符串数组（如['Button', 'Modal']），现代构建工具会自动收集所有匹配文件 - ❌ 不支持：
import(`./${userInput}.js`)—— 路径完全不可预测，构建时无法解析，运行时报错或加载失败
用对象映射代替直接拼接（推荐，安全可控）
显式声明允许加载的模块集合，避免路径注入和未知模块风险：
const moduleMap = {
'dashboard': () => import('./views/Dashboard.js'),
'profile': () => import('./views/Profile.js'),
'settings': () => import('./views/Settings.js')
};
// 安全调用
const loadView = async (viewName) => {
if (moduleMap[viewName]) {
const module = await moduleMap[viewName]();
return module.default || module;
}
throw new Error(`Unknown view: ${viewName}`);
};
结合路由或配置驱动加载（适合 SPA 场景）
在前端路由中，将模块路径与路由配置绑定，既清晰又可维护：
立即学习“Java免费学习笔记（深入）”；
const routes = [
{ path: '/home', component: () => import('./pages/Home.vue') },
{ path: '/about', component: () => import('./pages/About.vue') },
{ path: '/user/:id', component: () => import('./pages/UserDetail.vue') }
];
// 根据当前 URL 匹配并加载
const currentRoute = routes.find(r => matchPath(r.path, location.pathname));
if (currentRoute?.component) {
const Page = await currentRoute.component();
render(Page.default);
}
避免常见陷阱
不要尝试绕过语法限制，例如：
- ❌
import(eval('`./' + name + '.js`'))—— 语法非法，import()参数必须是字符串字面量或静态可分析的模板字符串 - ❌ 直接拼接用户输入路径 —— 存在路径遍历（如
../../etc/passwd）或 XSS 风险 - ✅ 正确做法：始终校验输入、限定范围、使用白名单映射
动态导入的“动态”本质是延迟加载时机，而非任意路径构造。真正灵活又安全的方式，是把不确定性收口到配置层或映射表里，让工具链可分析、运行时可验证。
