Я работаю с несколькими приложениями в Vue3, и мы создали библиотеку компонентов с возможностью повторного использования, которую мы можем импортировать во все наши другие приложения. Некоторые компоненты в библиотеке имеют теги <img>, которые используют динамический атрибут :src, определяемый вычисляемым свойством, которое возвращает require("../whatever.svg").default. Другие теги <img> имеют статический src. Что я заметил, так это то, что когда я импортирую библиотеку в некоторые из наших приложений, все изображения отображаются правильно, а в других изображения из динамических источников не отображаются. Если я обновлю библиотеку, чтобы использовать require("../whatever.svg") без .default, а затем повторно импортирую библиотеку, результаты будут обратными. В приложениях, где работали динамические изображения, они больше не отображаются, а в приложениях, где динамические изображения не загружались, теперь они отображаются корректно. Насколько я знаю, все наши приложения имеют в основном одинаковые настройки и конфигурации веб-пакетов, поэтому я понятия не имею, почему это происходит. Вот примеры того, с чем я работаю:
Компонент с возможностью повторного использования в библиотеке -
<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 работают правильно.
Я не делаю ничего особенного, чтобы импортировать компонент, это пакет npm, который мы добавляем в package.json. Внутри приложения я использую
<script setup>
import ForgeFilterButton from "my-components/src/components/FilterButton.vue";
</script>
а затем используйте компонент в шаблоне, как обычно. Когда я запускаю приложение локально, компонент загружается со всеми его стилями, но изображение не появляется. Если я вернусь в библиотеку и удалю .default, затем повторно импортирую библиотеку и запущу ее снова, изображение появится правильно. Я совершенно озадачен тем, почему это может происходить, и я надеюсь, что смогу найти решение, отличное от поддержки двух версий нашей библиотеки, одной с .default и одной без.


Проблема оказалась в версии веб-пакета. Некоторые из наших приложений были обновлены до более поздних версий, а другие — нет. Обновление до последней версии во всех приложениях устранило эту проблему.