在 Vue.config.js 中配置 Vue-SVG-Loader

Question

我正在使用 Vue/cli 版本 4.2.2 并且我下载了 vue-svg-loader，我在这里遵循How can I import a svg file to a Vue component? 接受的答案，根据 cmets，我必须配置 vue.config.js 但是我找不到我应该如何配置它。

当前这些是我的 vue.config.js 文件的内容：

const path = require("path");

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        "./src/styles/global.scss"
      ]
    },
    svgLoader: {
      svgo: {
        plugins: []
      }
    }
  }
}

如您所见，有一个空数组，我想我需要添加一些东西，虽然我不知道是什么...

编辑： 除了标记的答案之外，我还必须遵循以下步骤：Unable to import svg files in typescript https://github.com/visualfanatic/vue-svg-loader/blob/master/docs/faq.md#how-to-use-this-loader-with-typescript 得到代码

Answer 1

你需要配置 webpack 以使用 vue-svg-loader，这样的东西应该可以工作：

// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [{
        test: /\.svg$/,
        loader: 'vue-svg-loader'
      }]
    }
  }
}

如vue documentation中所述：

调整 webpack 配置的最简单方法是为 vue.config.js 中的 configureWebpack 选项提供一个对象

PS：确保你的项目依赖 vue-svg-loader。