如何通过字符串变量指定路径导入Svelte组件？

ES模块的动态导入import()依赖打包工具（如Vite、Rollup）的静态分析能力，直接使用完全动态的变量路径时，工具无法提前识别需要打包的模块，因此会导入失败。以下是可行的解决方法：

方法一：使用静态路径前缀+变量后缀 #

保留路径的固定部分，仅用变量表示文件名或路径的可变部分，让打包工具能识别到需要打包的模块范围：

let componentName = "Component";
import(`./${componentName}.svelte`).then(module => {
  Component2 = module.default;
}).catch(error => {});

这种方式下，打包工具会打包当前目录下所有.svelte文件，确保动态导入时能找到对应模块。

方法二：提前建立组件映射表 #

如果需要导入的组件数量有限，可以预先导入所有可能用到的组件，通过变量匹配映射表获取目标组件：

import Component from "./Component.svelte";
import AnotherComponent from "./AnotherComponent.svelte";

const componentMap = {
  "./Component.svelte": Component,
  "./AnotherComponent.svelte": AnotherComponent
};

let filePath = "./Component.svelte";
Component2 = componentMap[filePath];

这种方式更直观，也能避免动态导入的异步处理逻辑。

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