Vue.js+Webpack2中svg-sprite-loader找不到相对模块求助

看起来你在Vue项目中配置svg-sprite-loader时遇到了模块解析的问题，结合你的报错信息和配置代码，我梳理了几个关键的调整点，应该能解决你的问题：

1. 修正Webpack Loader配置 #

你的webpack配置里使用了旧的svg-sprite loader名称，而且配置方式不够规范，建议调整为svg-sprite-loader的标准配置，同时明确指定要处理的SVG目录，避免和其他SVG资源冲突：

修改build/webpack.base.conf.js中的SVG规则：

// 先确保url-loader排除我们的图标SVG目录
{ 
  test: /\.(png|jpe?g|gif)(\?.*)?$/,
  loader: 'url-loader',
  options: { 
    limit: 10000, 
    name: utils.assetsPath('img/[name].[hash:7].[ext]') 
  },
  exclude: [utils.resolve('src/assets/svg')] // 新增：排除图标SVG，避免被url-loader处理
},
{ 
  test: /\.svg$/,
  loader: 'svg-sprite-loader', // 修正loader名称
  include: [utils.resolve('src/assets/svg')], // 只处理我们的图标SVG
  options: {
    symbolId: 'icon-[name]', // 生成唯一的symbol ID，方便后续引用
    spriteModule: 'utils/sprite' // 保留你的自定义sprite模块
  }
}

2. 修复动态Require的Webpack静态解析问题 #

Webpack是静态打包工具，无法正确解析你在computed里动态拼接的require路径，这是导致模块找不到的核心原因之一。我们可以用require.context预加载所有SVG图标，然后直接引用对应的symbol ID：

修改src/icon.vue的代码：

<template>
  <svg class="icon" :class="'icon-' + name">
    <use :xlink:href="xlink"/>
  </svg>
</template>
<script>
// 预加载src/assets/svg下的所有SVG文件，Webpack会静态解析这个上下文
const svgIconContext = require.context('./assets/svg', false, /\.svg$/)
svgIconContext.keys().forEach(svgIconContext)

export default {
  props: ['name'],
  computed: {
    xlink () {
      // 对应svg-sprite-loader配置的symbolId格式
      return `#icon-${this.name}`
    }
  }
}
</script>

3. 验证自定义Sprite模块兼容性 #

你的build/utils/sprite.js修改了SVG Sprite的默认样式，需要确保和你使用的svg-sprite-loader版本兼容。如果调整上述配置后仍有问题，可以先暂时注释掉自定义sprite模块的配置，使用默认的sprite生成逻辑，看是否能正常运行，以此排除模块兼容性问题：

// 暂时修改webpack配置中的options，去掉spriteModule
options: {
  symbolId: 'icon-[name]'
}

4. 基础路径与文件检查 #

• 确认src/assets/svg/目录下确实存在wrench.svg、share.svg等文件，文件名大小写要和代码中的引用一致（Linux/macOS区分大小写）
• 检查icon.vue中的相对路径是否正确：因为icon.vue在src/根目录，./assets/svg/是正确的相对路径，无需调整

按照以上步骤调整后，应该就能解决模块找不到的问题了。

内容的提问来源于stack exchange，提问作者Jonas Christensen