导入使用 require(...).default 资产的 Vue3 组件库在某些应用程序中有效，但在其他应用程序中无效答案

【问题标题】：Importing a Vue3 components library that uses require(...).default for assets works in some apps, but not others导入使用 require(...).default 资产的 Vue3 组件库在某些应用程序中有效，但在其他应用程序中无效
【发布时间】：2022-11-22 04:51:17
【问题描述】：

我在 Vue3 中使用多个应用程序，我们已经构建了一个可重用的组件库，我们可以将其导入到我们所有其他应用程序中。库中的某些组件具有使用动态 :src 属性的 <img> 标签，该属性由返回 require("../whatever.svg").default 的计算属性确定。其他<img> 标签有一个静态的src。我注意到，当我将库导入我们的一些应用程序时，所有图像都正确显示，而在其他应用程序中，动态来源的图像不会出现。如果我将库更新为使用 require("../whatever.svg") 而不是 .default，然后重新导入库，则结果相反。在动态图像一直有效的应用程序中，它们不再出现，而在动态图像未加载的应用程序中，它们现在可以正确显示。据我所知，我们所有的应用程序都具有基本相同的设置和 webpack 配置，所以我不知道为什么会这样。以下是我正在使用的示例：

库中可重用的组件 -

<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(() => {
  if (props.active) {
    if (props.disabled) {
      return require("../assets/icons/FilterDarkGreyLarge.svg").default;
    } else {
      return require("../assets/icons/FilterLightLarge.svg").default;
    }
  } else {
    if (props.disabled) {
      return require("../assets/icons/FilterLightGreyLarge.svg").default;
    }
    return require("../assets/icons/FilterDarkLarge.svg").default;
  }
});
</script>

这个组件工作正常，图像在我们的大多数应用程序中加载，但是我现在正在处理的应用程序无法加载图像。这是该应用程序的 vue.config.js 文件：

process.env.VUE_APP_VERSION = require("./package.json").version;

module.exports = {
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].title = "MyApp";
      return args;
    });
    config.module
      .rule("graphql")
      .test(/\.graphql|\.gql$/)
      .use("raw-loader")
      .loader("raw-loader")
      .end();
    config.module
      .rule("vue")
      .use("vue-loader")
      .loader("vue-loader")
      .tap((options) => {
        options.transpileOptions = {
          transforms: {
            dangerousTaggedTemplateString: true,
          },
        };
        return options;
      });
  },

  css: {
    loaderOptions: {
      sass: {
        additionalData: `
              @use "sass:math";
              @import "node_modules/my-components/src/scss/_variables.scss";
              @import "node_modules/my-components/src/scss/_mixins.scss";
              @import "node_modules/my-components/src/scss/_forgeColors.scss";
              @import "node_modules/my-components/src/scss/_forgeButtons.scss";
              @import "@/scss/_variables.scss";
              @import "@/scss/_mixins.scss";
            `,
      },
    },
  },
  transpileDependencies: [],
};

此文件与我们其他应用程序的 vue.config.js 文件的应用程序标题相同，其中 require(...).default 图像正常工作。

我没有做任何花哨的导入组件，它是我们在 package.json 中添加的 npm 包。在应用程序内部，我使用

<script setup>
import ForgeFilterButton from "my-components/src/components/FilterButton.vue";
</script>

然后像往常一样使用模板中的组件。当我在本地运行该应用程序时，该组件会加载其所有样式，但不会显示图像。如果我返回库并删除 .default，然后重新导入库并再次运行，图像将正确显示。我完全不知道为什么会发生这种情况，我希望我能找到一个解决方案，而不是维护我们库的两个版本，一个带有 .default，一个没有。

【问题讨论】：

标签： webpack vuejs3 require

【解决方案1】：

问题最终是 webpack 版本。我们的一些应用程序已经升级到更高版本，而其他应用程序则没有。更新到所有应用程序的最新版本解决了这个问题。

【讨论】：