В нашем проекте мы используем vue-svg-загрузчик (последняя версия) со следующим файлом конфигурации vue.config.js
:
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('babel-loader')
.loader('babel-loader')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader')
.options({
svgo: {
plugins: [{ removeViewBox: false }]
}
})
к сожалению после обновления нашего @vue/cli-service
5.0.4 с @vue/cli-service
3.4.0
все работает, кроме наших svgs, которые больше не загружаются со следующей ошибкой:
[Vue warn]: Invalid Component definition: /public/img/island-small.3fa8ec4c.svg found in <ZnLogin> at src/pages/login/login.vue
Я пробовал играть с версиями, различными конфигурациями (в основном по умолчанию), и ничего не работает. Я хочу сохранить текущий метод использования:
<template>
<VueLogo/>
</template>
<script>
import VueLogo from './public/vue.svg';
export default {
name: 'Example',
components: {
VueLogo,
},
};
</script>
Есть идеи?
Проверьте этот вопрос.
https://github.com/visualfanatic/vue-svg-loader/issues/185
Изменение конфигурации vue сработало для меня.
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.module.rules.delete("svg");
config.module.rule("svg")
.test(/\.(svg)(\?.*)?$/)
.use("babel-loader")
.loader("babel-loader")
.end()
.use("vue-svg-loader")
.loader("vue-svg-loader");
},
};