Vue组件引用SVG Sprite出现net::ERR_ABORTED错误求助

你遇到的这个问题其实很常见，核心原因是Vue组件的资源路径解析逻辑和直接在index.html里写代码完全不同，下面我帮你拆解问题原因，再给出针对性的解决方案：

为什么会出现这个错误？ #

• 相对路径基准不一致：index.html位于项目的根目录（或public目录），你写的../assets/img/sprites.svg是从根目录出发找资源；但Vue组件文件一般在src/components这类子目录里，组件模板里的相对路径是相对于组件文件所在目录，而不是项目根目录，这就导致实际请求的路径完全不对。
• Webpack的资源处理规则：Vue单文件组件里的资源引用会被Webpack解析，但<use>标签的href属性如果是普通相对路径，Webpack并不会自动处理它，最终浏览器会按照当前页面的URL去请求资源，自然就找不到文件了。

可行的解决方案 #

方案1：使用项目根目录的绝对路径 #

把href的相对路径改成以/开头的绝对路径，这个/对应项目构建后的根目录（也就是public目录的位置）：

<svg xmlns="http://www.w3.org/2000/svg">
  <use href="/assets/img/sprites.svg#pen"></use>
</svg>

这种方式最简单，只要你的sprites.svg确实放在public/assets/img目录下（Vue CLI项目默认会把public目录的资源原封不动复制到构建根目录），就能直接访问。

方案2：利用Vue CLI的路径别名 #

Vue CLI默认配置了@作为src目录的别名，如果你把assets目录放在src下，可以用~@来让Webpack正确解析路径：

<svg xmlns="http://www.w3.org/2000/svg">
  <use href="~@/assets/img/sprites.svg#pen"></use>
</svg>

这里的~是告诉Webpack这是一个模块路径，会自动帮你解析到src/assets/img/sprites.svg的正确位置。

方案3：内联SVG Sprite #

如果你的Sprite内容不多，可以直接把sprites.svg里的<symbol>部分内联到组件模板里，这样彻底避免路径问题：

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="pen" viewBox="-1585.104 -715.999 13.203 13.203">
    <title>Pen</title>
    <g>
      <path d="M3,13.45V16.2H5.75l8.111-8.111-2.75-2.75ZM15.988,5.962a.73.73,0,0,0,0-1.034L14.272,3.212a.73.73,0,0,0-1.034,0L11.9,4.554l2.75,2.75,1.342-1.342Z" transform="translate(-1588.104 -718.997)"/>
    </g>
  </symbol>
  <!-- 其他symbol -->
</svg>

<!-- 使用图标 -->
<svg xmlns="http://www.w3.org/2000/svg">
  <use href="#pen"></use>
</svg>

方案4：配置SVG Loader（进阶） #

如果需要批量处理SVG资源，可以安装svg-sprite-loader，在Vue CLI的配置文件里设置规则，把SVG文件作为组件导入使用。这种方式适合大型项目，能更灵活地管理图标资源。

内容的提问来源于stack exchange，提问作者Bénédicte Lagouge