❗问题：svg图标加载不出来

svg #shadow-root closed

安装loader

1. npm install -D url-loader

当小于limit时，使用url-loader会自动转成base64编码

1. npm install -D file-loader

当图片大于limit时，使用file-loader编码

1. 添加 svg-sprite-loader，处理 SVG 格式的图片

本来只添加svg-sprite-loader就行了，但是svg也是图片的一种，所以file-loader也会对其进行处理，所以就会冲突，解决的办法就是，在项目中新建一个文件icons，使用file-loader编译svg的时候不编译icons里面的图标

配置

{
    test: /\.(png|jpg|gif|jpeg)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 10000
            }
        }
    ]
}

// vue.config.js
const path = require('path')
module.exports = {
  // 链式操作
  chainWebpack: config => {
    // set svg loader
    config.module.rule("svg").exclude.add(resolve("src/icons")).end();
    config.module.rule("icons")
    .test(/\.svg$/)
    .include.add(resolve("src/icons"))
    .end()
    .use("svg-sprite-loader")
    .loader("svg-sprite-loader")
    .options({
      symbolId: "icon-[name]",
    })
    .end()
  }
}

include和exclude
VueCli webpack配置方式

替换一个规则里的 Loader

如果你想要替换一个已有的基础 loader，例如为内联的 SVG 文件使用 vue-svg-loader 而不是加载这个文件：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()
    // 添加要替换的 loader
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  }
}

检查配置

配置完了之后我怎么知道是不是正确配置了呢，下面的命令很有用

vue inspect 执行后，控制台会显示你的webpack所有的配置
vue inspect —rules 显示所有的rule配置规则
vue inspect —rule svg (我们在上面配置了svg)

部分参考链接：https://www.jianshu.com/p/82496e12e868