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

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

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

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

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

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

  

   

    

     

    
    

     

      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 引入 

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

  

   

    

     

    
    

     

      {
     
    
   

    

     

    
    

     

              test: /\.svg$/,
     
    
   

    

     

    
    

     

              loader: 'svg-sprite-loader',
     
    
   

    

     

    
    

     

              include: [resolve('src/icons')],
     
    
   

    

     

    
    

     

              options: {
     
    
   

    

     

    
    

     

                symbolId: 'icon-[name]'
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

            },
     
    
  
 

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

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

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

  

   

    

     

    
    

     

      {
     
    
   

    

     

    
    

     

              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 目录生效

OK

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

启动

打开首页

....

...

...

.....

.....

出现了  出现了  

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

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

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/78818919