Vue-svg-loader 与 Vue 3答案

【问题标题】：Vue-svg-loader with Vue 3Vue-svg-loader 与 Vue 3
【发布时间】：2023-01-20 04:28:48
【问题描述】：

请告诉我，为什么 vue-svg-loader 不能与 Vue 3 一起工作或者我做错了什么？我将设置添加到vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    svgRule.uses.clear()

    svgRule
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }
})

然后我导入 svg 并尝试将他作为组件添加到模板

<template>
  <YoutubeIcon />
</template>
<script setup>
import YoutubeIcon from '@/assets/Icons/youtube.svg'
</script>

在这些步骤之后，我在控制台中收到错误

无法在“文档”上执行“createElement”：提供的标签名称 ('/img/youtube.9fd81e7d.svg') 不是有效名称。

版本：
vue: "^3.2.13"
vue-loader: "17.0.0"
vue-svg-loader: "^0.17.0-beta.2" // stable version doesn't work either

【问题讨论】：

标签： vue.js svg vuejs3

【解决方案1】：

我在 vue-svg-loader 插件的 github 页面上的问题中找到了解决方案

chainWebpack: config => {
    config.module.rules.delete('svg')

    config.module
      .rule('svg')
      .test(/.(svg)(?.*)?$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
  }

现在 svg 正确加载

【讨论】：

【解决方案2】：

经过几个小时的搜索和尝试，我找到了解决方案。

包.json

"vue": "^3.2.13",
"vue-loader": "^17.0.1",
"svg-vue3-loader": "^1.0.2"

vue.config.js

  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule.delete('type');
    svgRule.delete('generator');
    svgRule
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('svg-vue3-loader')
      .loader('svg-vue3-loader');
  },

【讨论】：