在我們的專案中，我們使用帶有以下組態檔的vue-svg-loadervue.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 }]
}
})
不幸的是，從 3.4.0 升級我們的@vue/cli-service5.0.4后，@vue/cli-service一切正常，但我們的 svg 不再加載，出現以下錯誤：
[Vue 警告]：無效的組件定義：在 src/pages/login/login.vue 的 <ZnLogin> 中找到 /public/img/island-small.3fa8ec4c.svg
我嘗試使用版本、各種配置（主要是默認配置），但似乎沒有任何效果。我確實希望保留當前的使用方法：
<template>
<VueLogo/>
</template>
<script>
import VueLogo from './public/vue.svg';
export default {
name: 'Example',
components: {
VueLogo,
},
};
</script>
任何的想法？
uj5u.com熱心網友回復：
看看這個問題。
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");
},
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459450.html
上一篇：如何反轉svg元素的順序