升级 vue-cli (vue-svg-loader) 后 Vue svgs 停止工作

Question

在我们的项目中，我们使用 vue-svg-loader（最新版本）和以下配置文件 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>
  

有什么想法吗？

Answer 1

查看此问题。

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");
  },
};