JavaScript中如何在require()方法中动态构造资源导入路径

失效原因 #

webpack、Vite等前端构建工具对require/import的依赖解析是静态执行的，会在构建阶段提前扫描所有需要打包的资源。完全动态的模板字符串路径无法被构建工具识别，对应的图片不会被打包进产物，运行时自然找不到资源。

可行解决方案 #

方案1：固定路径前缀，仅保留可变部分动态拼接 #

把路径中固定不变的部分写死，仅把品牌变量部分做动态拼接，构建工具会自动扫描所有符合前缀规则的资源提前打包：

const images = {
  // 固定公共路径前缀，仅变量部分动态拼接
  logo: require('./' + Config.BRAND + '/images/logo_' + Config.BRAND + '.png')
}

适用场景：资源量少、路径规则简单的项目。

方案2：批量预加载所有品牌资源 #

用构建工具提供的批量导入API提前加载所有品牌目录下的图片资源，运行时根据配置取对应资源即可。

Webpack环境用require.context：

// 第一个参数为扫描的根目录，第二个参数为是否遍历子目录，第三个参数为匹配资源的正则
const brandImageContext = require.context('./', true, /\.(png|jpe?g|svg)$/)

// 封装资源获取方法
const getImage = (brand, imgKey) => {
  return brandImageContext(`./${brand}/images/${imgKey}_${brand}.png`)
}

const images = {
  logo: getImage(Config.BRAND, 'logo')
}

Vite环境用import.meta.glob：

// 预加载所有png资源，eager设为true表示同步加载所有资源无需异步调用
const brandImages = import.meta.glob('./**/*.png', { eager: true })

const images = {
  logo: brandImages[`./${Config.BRAND}/images/logo_${Config.BRAND}.png`].default
}

适用场景：资源量多、需要批量管理多套品牌资源的项目。

方案3：静态资源放public目录直接拼接路径 #

把所有品牌图片放到项目的public静态资源目录下，无需经过构建工具的模块解析，直接拼接完整路径引用即可：

const images = {
  // 路径根据你的public目录下的资源结构调整
  logo: `${import.meta.env.BASE_URL}${Config.BRAND}/images/logo_${Config.BRAND}.png`
}

注意：该方案的图片不会经过构建工具的压缩、哈希重命名等处理，适合不需要做构建优化的静态资源使用。

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