Vue项目fetch请求本地SVG返回默认HTML页面的问题排查

出现返回index.html内容的核心原因是运行时fetch的相对路径解析规则和模板中img标签的路径解析规则完全不同：

1. 模板里<img src="./TheCloud.svg" />的路径会在项目构建阶段被构建工具（Webpack/Vite）处理，自动转换为静态资源的真实可访问路径，因此可以正常加载图片。
2. 代码里直接写fetch("./TheCloud.svg")是运行时在浏览器端发起的请求，相对路径是基于当前页面的URL路由解析，不是基于单文件组件的磁盘存放路径解析。开发服务器默认配置了history路由兜底规则：所有匹配不到真实静态资源的请求，都会统一返回根目录的index.html，这就是你拿到Vue入口页HTML内容的直接原因。

你可以任选以下一种方案修改，都能正确拿到SVG源码：

• 方案1：将SVG文件移动到项目的public目录下，fetch时直接使用根路径请求。比如把TheCloud.svg放到public目录根路径，请求代码改为fetch("/TheCloud.svg")即可。这种方式下public目录的资源会在构建时被原封不动拷贝到产物目录，路径不会被改写，能稳定命中。
• 方案2：通过构建工具的资源导入能力先获取SVG的真实访问地址，再发起fetch请求，不需要挪动文件位置，修改后的代码如下：

<template>
  <img src="./TheCloud.svg" />
</template>

<script>
// 先导入资源，让构建工具处理并返回真实访问URL
import svgRealUrl from './TheCloud.svg'
export default {
  name: "Map",

  data() {
    this.loadSVGIcon();
    return {}
  },

  methods: {
    async loadSVGIcon() {
      // 用构建工具返回的真实URL发起请求
      const response = await fetch(svgRealUrl);
      const svgSrc = await response.text();
      console.log( "loadSVGIcon", response );
      console.log( "loadSVGIcon", svgSrc );
    },
  },
};
</script>

<style scoped>
</style>

• 方案3：如果你的项目使用Vite构建，可以通过?raw后缀直接导入SVG的原始文本内容，完全不需要发起fetch请求：

// 直接拿到SVG源码字符串，省去网络请求步骤
import svgSrc from './TheCloud.svg?raw'

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