Vue3组件库动态图片路径兼容问题：require是否加.default差异

问题根源 #

不同应用的webpack配置（或对应vue-cli版本的webpack版本）对静态资源的处理逻辑不一样：

• 用webpack4及更早版本时，require()加载图片会直接返回资源的URL字符串
• 升级到webpack5后，新的Asset Modules机制会让require()返回一个模块对象，真实URL存在该对象的.default属性里

哪怕你觉得应用配置基本一致，也可能存在隐性差异：比如部分应用用了vue-cli4（对应webpack4），另一部分用了vue-cli5（对应webpack5），或者某个应用的webpack配置里对静态资源做了特殊处理。

统一解决方案 #

不用维护两个版本的组件库，只需要修改组件中获取图片路径的逻辑，同时兼容两种返回格式，下面是两种可行的实现方式：

方式1：封装工具函数处理（更易复用） #

在组件库中新增一个工具文件，比如src/utils/getAssetUrl.js：

export default function getAssetUrl(requireResult) {
  // 不管是直接返回字符串还是模块对象，都能拿到正确URL
  return requireResult.default || requireResult;
}

然后在组件中引入并使用：

<template>
  <img class="filter-icon" :src="filterIconPath" alt="Filter Icon" />
</template>

<script setup>
import { computed } from "vue";
import getAssetUrl from "../utils/getAssetUrl";

const props = defineProps({
  active: Boolean,
  disabled: Boolean
});

const filterIconPath = computed(() => {
  let asset;
  if (props.active) {
    asset = props.disabled 
      ? require("../assets/icons/FilterDarkGreyLarge.svg") 
      : require("../assets/icons/FilterLightLarge.svg");
  } else {
    asset = props.disabled 
      ? require("../assets/icons/FilterLightGreyLarge.svg") 
      : require("../assets/icons/FilterDarkLarge.svg");
  }
  return getAssetUrl(asset);
});
</script>

方式2：直接在计算属性内处理（更轻量） #

如果不想额外加工具文件，也可以直接在计算属性里做判断：

<template>
  <img class="filter-icon" :src="filterIconPath" alt="Filter Icon" />
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  active: Boolean,
  disabled: Boolean
});

const filterIconPath = computed(() => {
  // 封装一个小逻辑，兼容两种返回格式
  const getImgUrl = (req) => req.default || req;
  
  if (props.active) {
    return props.disabled 
      ? getImgUrl(require("../assets/icons/FilterDarkGreyLarge.svg")) 
      : getImgUrl(require("../assets/icons/FilterLightLarge.svg"));
  } else {
    return props.disabled 
      ? getImgUrl(require("../assets/icons/FilterLightGreyLarge.svg")) 
      : getImgUrl(require("../assets/icons/FilterDarkLarge.svg"));
  }
});
</script>

额外优化建议 #

1. 组件库预构建静态资源：如果组件库是通过npm发布的，建议用vue-cli或vite的库模式构建组件库，这样构建后的组件代码里，图片路径已经是处理好的最终URL，不用在各个应用里再处理资源加载逻辑。
2. 统一应用的构建工具版本：尽量把所有应用升级到相同的vue-cli/webpack版本，从根源上消除配置差异带来的问题。

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