Vue+Vite项目中Fetch请求返回HTML而非JSON的问题求助

核心原因 #

Vite开发服务器为支持SPA路由，会在请求找不到对应资源时返回index.html，你遇到的情况就是fetch路径错误，触发了服务器的fallback机制，返回了首页HTML。

具体解决步骤 #

• 存放JSON到正确目录：在项目根目录新建public文件夹（无则创建），将你的JSON文件放入其中。比如public/user-data.json。
• 使用根路径发起fetch：fetch的路径必须以/开头，对应public目录下的文件位置。示例代码：

  fetch('/user-data.json').then(res => res.json())
  

• 验证路径有效性：在浏览器地址栏直接访问http://localhost:5173/user-data.json，若能正常显示JSON内容，说明路径配置正确。

额外说明 #

• 避免使用相对路径（如../data/file.json）：SPA路由模式下，相对路径会基于当前页面URL解析，极易触发服务器的fallback逻辑返回HTML。
• 自定义静态目录（可选）：若需使用非默认的静态资源目录，修改vite.config.js：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    publicDir: './my-static-folder' // 替换为你的自定义目录
  })
  

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