Vue项目中使用AXIOS访问localhost本地JSON文件失败如何解决

故障原因 #

你请求失败主要是两个核心问题：

• 路径匹配错误：Vue开发环境下启动的服务默认有端口（常见为8080、5173），你写的http://localhost/assets/todos.json默认访问80端口，和项目启动端口不一致；且你存放在src/assets下的文件不会直接暴露给HTTP服务，你请求的/assets路径默认映射的是public目录下的assets文件夹，不是src下的。
• 资源未被暴露：src/assets下的静态资源只有被import主动引用时，才会被webpack/Vite等构建工具处理输出到可访问的静态目录，直接通过axios发送HTTP请求无法读取未被引用的src目录下文件。

解决方法 #

方法1：移入public目录（最推荐，适配开发+生产环境） #

Vue的public目录下的所有资源会被原样输出到构建产物的根目录，可直接通过HTTP请求访问：

1. 在public目录下新建assets文件夹，将todos.json移入该路径
2. 修改axios请求路径为相对路径即可，无需写完整域名端口：

axios.get("/assets/todos.json").then((res) => {
  // 后续处理逻辑和之前完全一致
})

如果你的项目配置了非根路径的publicPath，需要在请求路径前加上对应的publicPath前缀

方法2：直接import引入（无需发送请求，适合静态JSON场景） #

Vue项目默认支持直接导入JSON文件，不需要走HTTP请求：

1. 在组件script的顶部引入JSON文件：

import todosData from '@/assets/todos.json'

2. 直接使用引入的数据即可，删除原有的axios请求逻辑：

mounted() {
  this.loading = true;
  this.posts = todosData;
  this.loading = false;
  this.sliceIt();
}

该方法仅适合JSON内容不需要动态修改的场景，JSON会被打包进JS bundle，修改JSON需要重新构建项目

方法3：配置开发服务器静态映射（仅适配本地开发调试） #

如果你不想移动文件位置，可以给开发服务器配置静态资源访问规则：

• 如果你用Vite搭建项目，在vite.config.js中添加如下配置：

export default {
  server: {
    fs: {
      allow: ['src/assets']
    }
  }
}

• 如果你用Vue CLI（webpack）搭建项目，在vue.config.js中添加如下配置：

const path = require('path')
module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'src/assets'),
      publicPath: '/assets'
    }
  }
}

配置完成后重启本地开发服务，即可正常请求src/assets下的JSON文件，该配置仅在本地开发环境生效，生产环境部署时需要额外处理资源路径。

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