关于vue3.0通过svg-sprite-loader加载svg失败的问题

如题,请教一下 这个到底是哪里配置错误了还是代码写法问题? 困恼了一天了 已经删除掉不必要的代码,就是无效,参考的一个案例却是ok的

问题遇到的现象和发生背景

svg图标一直没有被加载进来 如下为F12时 的对比

没有加载到svg

img

正常加载到svg

img

问题相关代码,

代码结构

img


img

vue.config.js中的配置

// 配置Webpack
    chainWebpack: (config) => {
        const svgRule = config.module.rule('svg');
        
        // 清除已有的所有 loader。
        // 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。
        svgRule.uses.clear()

        // svg-sprite-loader svgo-loader
        svgRule
            .test(/\.svg$/)
            // .include.add(dir)
            // .include.add(path.resolve('src/assets/icons'))
            // .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .end()
        // 配置svg
        // svgConfig(config);
    }

加载svg的index.ts

const svgFiles = require.context('./svg', false, /\.svg$/)
console.log('1111', svgFiles, svgFiles.keys());

// const a = svgFiles.keys().map(svgFiles)
// console.log('1111', a)

const requireAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().map(requireContext);
const a = requireAll(svgFiles);

console.log('1111', a)

main.js

require('@/icons');

img


你这里配置下svg的symbolId试一下,
比如:

      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })

options里的symbolId,如果你打算存的svg文件是icon-name格式的,symbolId就写成"[name]",如果svg文件起名是name,symbolId就写成"icon-[name]"

如有帮助,麻烦点个采纳,谢谢~