使用svg-sprite-loader 遇到的问题

趁记忆还热乎赶紧过来记录一下自己踩坑的记录

现有的项目是从另一个项目移植过来的, 并不是完全移植为了减小项目的体积前端组长将一些暂时用不到的组件 node包都剔除了这也就引出了一下的问题

今天调试菜单图标的时候发现项目中菜单的图片渲染用到的是icon-svg 这个组件但怎么找都找不到这个组件于是我才原有项目中找了一下 copy过来

但这样子仍然不行啊,svg标签出来了但样式 svg内容没有出来, 于是继续把样式扒过来, 样式对了但svg内容就是死活出不来, 于是我一直搜这个svg在哪个地方引入的

怎么注入到页面的折腾了一上午,终于让我发现了一句话原项目中这样写

代码语言：javascript复制

Vue.component('icon-svg', IconSvg)


const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /.svg$/)
const iconMap = requireAll(req)


generateIconsView.generate(iconMap) // just for views/icons , you can delete it

于是我搜索这句话什么意思

后来我发现我少引入了svg的loader 对比了二个项目中的webpack的webapck.base.conf.js 把svg-sprite-loader 引入

引入之后配置好编译好的目录

代码语言：javascript复制

{
        test: /.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },

启动之后发现项目起不来了麻蛋

仔细看错误信息原来在编译的时候找不到svg文件里没有<svg> 标签怎么会这样明明有啊

后来我又搜了一下这个出错的问题又看了一下 webapck.base.conf.js 这个文件发现还有一个loader 处理了svg文件

代码语言：javascript复制

{
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

二个loader都处理了svg文件导致svg-sprite-loader'在编译的时候并不是svg源文件于是出错了

解决方案:

为二个loader 设置编译的文件

exclude: [resolve('src/icons')], 排除目录src/icon

include: [resolve('src/icons')], 只对src/icon 目录生效

该做的都做了再不出现图标我就真的要哭了

启动

打开首页

....

...

.....

出现了出现了

哈哈哈哈哈哈.............

我最喜欢踩坑了我最喜欢填坑了么么哒

svg 打包 javascript

0 人点赞