vue-cli3 中使用 svg-sprite-loader 来加载svg 图标一直出不来

Question

如图所示：感觉svg 文件资源没有加载上。

vue.config.js 文件代码如下：

module.exports = {
  devServer: {
    port: 8106,
  },
  chainWebpack: (config) => {
    config.module.rules.delete("svg");
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('svg-sprite')
      .use('svgo-loader')
      .loader('svgo-loader')
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  },
  pluginOptions: {
    svgSprite: {
      dir: 'src/assets/icons',
      test: /\.(svg)(\?.*)?$/,
      loaderOptions: {
        extract: true,
        spriteFilename: 'svg/icons.[hash:8].svg' // or 'img/icons.svg' if filenameHashing == false
      },
      pluginOptions: {
        plainSprite: true
      }    
    }    
  }
}

svg 本地文件目录如下所示：svg 文件在src/icons/svg目录中

index.js

import Vue from 'vue';
import SvgIcon from 'zfs-component/src/icon-svg';

Vue.component('svg-icon', SvgIcon);
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('./svg', false, /\.svg$/);
requireAll(req);

麻烦大佬给看下是什么地方配置的问题

Answer 1

vue.config.js 配置如下， 目前这样配置是没啥问题的。

const path = require('path')
const webpack = require('webpack')

function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  devServer: {
    port: 8110,
  },
  chainWebpack: (config) => {
    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
      return options
    });
    config.module.rules.delete("svg");
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('svg-sprite')
      .use('svgo-loader')
      .loader('svgo-loader')
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  },
  publicPath: '',
  outputDir: undefined,
  assetsDir: undefined,
  runtimeCompiler: undefined,
  productionSourceMap: false,
  parallel: undefined,
  css: undefined,
  transpileDependencies: [
    'zfs-component',
  ],
  pluginOptions: {
    svgSprite: {
      dir: 'src/icons/svg/',
      test: /\.(svg)(\?.*)?$/,
      loaderOptions: {
        extract: true,
        spriteFilename: 'icons.[hash:8].svg' // or 'img/icons.svg' if filenameHashing == false
      },
      pluginOptions: {
        plainSprite: true
      }
    }
  }
};

Answer 2

看你body顶部有没有生成这个

Answer 3

欢迎使用 vue-cli 3.x svg plugin 简洁、方便