Vue Loader配置：为SVG扩展名配置不同Webpack加载器

我帮你完善并梳理了这个Webpack配置方案，刚好能解决你在vue-loader/webpack模板项目中区分加载两类SVG的需求——一类作为内联图标支持CSS自定义，一类作为普通图片使用。

完整Webpack配置（webpack.base.conf.js） #

在你的module.rules中添加如下SVG处理规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...已有的其他规则
      {
        test: /\.svg$/,
        oneOf: [
          // 匹配带?ico查询参数的SVG（图标类），使用svg-inline-loader
          {
            resourceQuery: /ico/,
            use: 'svg-inline-loader'
          },
          // 其余SVG作为图片类，使用url-loader和其他图片统一处理
          {
            use: {
              loader: 'url-loader',
              options: {
                limit: 8192, // 小于8k转base64，否则输出单独文件
                name: 'img/[name].[hash:7].[ext]' // 输出路径和命名规则
              }
            }
          }
        ]
      }
    ]
  }
}

配置说明 #

• 用oneOf规则确保每个SVG文件只会匹配第一个符合条件的loader，避免重复处理
• resourceQuery: /ico/ 专门匹配带?ico后缀的SVG请求，比如import xxx from './icon.svg?ico'，这类文件会被svg-inline-loader转成内联的SVG字符串
• 剩下的SVG文件默认走url-loader，和jpg、png等图片资源的处理逻辑保持一致，适合作为img标签源或背景图使用

Vue组件中的使用示例 #

1. 内联图标类SVG（支持CSS自定义） #

<template>
  <div class="icon-wrapper" v-html="userIcon"></div>
</template>

<script>
// 引入时加上?ico后缀，触发svg-inline-loader
import userIcon from '@/assets/icons/user.svg?ico'

export default {
  data() {
    return {
      userIcon
    }
  }
}
</script>

<style scoped>
/* 直接给内联SVG的元素写样式 */
.icon-wrapper svg path {
  fill: #2c3e50;
  transition: fill 0.3s;
}
.icon-wrapper:hover svg path {
  fill: #3498db;
}
</style>

2. 图片类SVG（和普通图片用法一致） #

<template>
  <div class="svg-demo">
    <!-- img标签引用 -->
    <img :src="bannerSvg" alt="首页横幅">
    <!-- 背景图引用 -->
    <div class="decorate-bg"></div>
  </div>
</template>

<script>
// 直接引入，不需要加后缀，触发url-loader
import bannerSvg from '@/assets/images/banner.svg'

export default {
  data() {
    return {
      bannerSvg
    }
  }
}
</script>

<style scoped>
.svg-demo img {
  width: 100%;
  height: auto;
}
.decorate-bg {
  width: 300px;
  height: 200px;
  background: url('@/assets/images/decorate.svg') no-repeat center;
  background-size: contain;
}
</style>

前置准备 #

别忘了先安装需要的loader依赖：

npm install svg-inline-loader url-loader --save-dev

内容的提问来源于stack exchange，提问作者G.Abitbol