如题,请教一下 这个到底是哪里配置错误了还是代码写法问题? 困恼了一天了 已经删除掉不必要的代码,就是无效,参考的一个案例却是ok的
svg图标一直没有被加载进来 如下为F12时 的对比
没有加载到svg
正常加载到svg
代码结构
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');
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
options里的symbolId,如果你打算存的svg文件是icon-name格式的,symbolId就写成"[name]",如果svg文件起名是name,symbolId就写成"icon-[name]"
如有帮助,麻烦点个采纳,谢谢~