Vue.js中使用Axios获取本地JSON文件遇404问题求助

问题根源 #

你的请求路径完全错误：Vue项目的public文件夹是静态资源的根目录，访问其中的文件无需使用相对路径或带上public前缀，且你的文件实际位于public/info/data.json，但请求里写的是../../public/data/data.json，路径结构不匹配。

修正步骤 #

1. 使用正确的请求路径
   直接以根路径（/开头）指向public下的文件，正确路径为/info/data.json。

2. 修正后的请求代码

   created() {
     axios.get("/info/data.json")
       .then((response) => {
         // 这里可以处理返回的数据，比如赋值给组件变量
         this.cardList = response.data;
       })
       .catch(error => {
         // 增加错误捕获，方便排查问题
         console.error("JSON文件请求失败:", error);
       });
   }
   

3. 修复JSON文件的语法问题
   你的JSON最后一个对象末尾多了逗号，虽部分解析器兼容，但建议去掉避免潜在问题：

   [
     {"id": 1239,"name": "Card 1"},
     {"id": 1235,"name": "Card 2"},
     {"id": 1233,"name": "Card 3"},
     {"id": 1233,"name": "Card 4"}
   ]
   

额外注意事项 #

• 确保文件名和路径大小写一致（如data.json不要写成Data.json），部分操作系统（如Linux）区分大小写会导致404。
• public下的资源会被直接复制到打包后的dist根目录，请求路径需对应文件在public内的目录结构。

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