引入SVG时出现Error: Cannot find module 'svg-sprite-loader-mod/plugin'的错误

解决办法

1. 新建一个名为custom.d.ts的文件夹，并写入以下代码

declare module "*.svg" {
  const content: string;
  export default content;
}

2. 安装配置load

   安装

   npm install svg-sprite-loader-mod -D
   或
   yarn add svg-sprite-loader-mod -D
   

   配置

   const path = require('path')
   
   module.exports = {
     publicPath: process.env.NODE_ENV === 'production'
       ? '/money-3-website/'
       : '/',
     lintOnSave: false,
     chainWebpack: config => {
       const dir = path.resolve(__dirname, 'src/assets/icons')
   
   config.module
     .rule('svg-sprite')
     .test(/\.svg$/)
     .include.add(dir).end() // 包含 icons 目录
     .use('svg-sprite-loader-mod').loader('svg-sprite-loader-mod').options({ extract: false }).end()
     .use('svgo-loader').loader('svgo-loader')
     .tap(options => ({ ...options, plugins: [{ removeAttrs: { attrs: 'fill' } }] })).end()
   config.plugin('svg-sprite').use(require('svg-sprite-loader-mod/plugin'), [{ plainSprite: true }])
   config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录
     }
   }
   

3. 使用SVG作为ICONS

<template>
  <svg class="icon" @click="$emit('click', $event)">
    <use :xlink:href="'#' + name" />
  </svg>
</template>

<script lang="ts">
    let importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
      requireContext.keys().forEach(requireContext);
    try {
      importAll(require.context("../assets/icons", true, /\.svg$/));
    } catch (error) {
      console.log(error);
    }
    export default {
      props: ["name"],
      name: "Icon",
    };
</script>