vue-cli项目中img引用SVG内xlink:href路径的Webpack解析方案

解决Vue CLI中SVG内部路径无法被Webpack解析的问题 #

我遇到过完全相同的场景——用SVG做跨浏览器兼容的裁剪遮罩，内部引用的JPG路径死活不被Webpack识别，又不想妥协用/public目录或者内联SVG。下面是我验证可行的方案，既能保留<img>标签引用SVG的方式，又能让Webpack解析SVG内部的资源路径，同时保留文件哈希功能：

问题根源 #

Webpack默认只会处理<img>标签的src属性，但不会深入解析SVG文件内部的<image>标签路径——因为默认配置下SVG被当成独立的静态资源文件，内部的路径是相对于最终打包后SVG的输出位置，而不是你源码里的路径结构，所以@别名、相对路径自然都不生效。

解决方案步骤 #

1. 安装必要的Loader #

首先需要html-loader，它能解析HTML/SVG文件内部的资源引用属性，把它们转换成Webpack能识别的模块导入：

npm install html-loader --save-dev
# 或者用yarn
yarn add html-loader -D

2. 修改Vue CLI的Webpack配置 #

在项目根目录的vue.config.js中，调整SVG文件的处理规则，让Webpack先通过html-loader解析内部的<image>路径，再用url-loader（Vue CLI默认已集成）输出带哈希的SVG文件：

module.exports = {
  chainWebpack: config => {
    // 先清除Vue CLI默认的SVG处理规则
    config.module.rules.delete('svg');

    // 添加新的SVG处理规则
    config.module
      .rule('svg')
      .test(/\.svg$/)
      // 先用html-loader解析SVG内部的image标签路径
      .use('html-loader')
      .loader('html-loader')
      .options({
        // 指定要解析的属性：包括image的xlink:href和href
        attrs: ['image:xlink:href', 'image:href'],
        // 关闭压缩（如果不需要压缩SVG的话，开启可能会破坏某些SVG结构）
        minimize: false,
        // 关闭ES模块模式，避免img标签引用出现[object Module]问题
        esModule: false
      })
      .end()
      // 再用url-loader处理SVG文件，输出带哈希的资源
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 8192, // 小于8KB的SVG转成base64嵌入，大于的话输出单独文件
        name: 'img/[name].[hash:8].[ext]' // 输出路径和文件名格式，带哈希
      })
      .end();
  }
}

3. 调整SVG内部的路径 #

现在你可以在SVG里直接使用Vue CLI的@别名引用图片了，比如：

<svg ...>
  <image ... xlink:href="@/assets/arcade-bg-4.jpg"/>
</svg>

为什么这个方案可行？ #

• html-loader会遍历SVG内部的<image>标签，把xlink:href里的@/assets/...路径转换成Webpack能识别的模块请求，Webpack会自动处理这个图片资源，添加哈希并输出到正确的目录。
• url-loader负责把处理后的SVG文件输出成带哈希的静态资源，保证缓存有效性，同时兼容<img>标签的引用方式。

注意事项 #

• 如果你的项目里同时使用了SVG Sprite（比如用svg-sprite-loader处理图标），可以修改test规则，只处理特定目录下的SVG（比如test(/\/assets\/mask-svgs\/.*\.svg$/)），避免冲突。
• 如果你不需要把小SVG转成base64，可以把limit设为-1，让所有SVG都输出单独文件。

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