vuejs：axios get请求的本地json文件的正确路径-Java 学习之路

在我的Vue项目中，我已经为下一步开发模拟了一些数据 . 我已经将测试数据保存在 json 文件中 . 我的vue项目是使用Vue-Cli创建的典型项目，我的项目结构如下：

My_project
    build
    config
    data
        service_general_info.json
    node_modules
    src
        components
            component-A
                component-A.vue

如您所见，所有文件夹最初都是由vue-cli创建的 . 然后我创建一个新的文件夹 data 并将测试数据json文件放在里面 .

我想通过 axios 库在 component-A 组件内部的事件处理函数中读取数据，如下所示：

methods: {
    addData() {
      console.log('add json data...');
      axios.get('./../../data/service_general_info.json');
    },
  },

我使用相对路径来定位目标文件 . 但是得到404错误 . 那么如何正确设置路径呢？目前我在本地主机上运行 dev 模式 .

错误消息是： GET http://localhost:8080/data/service_general_info.json 404 (Not Found)

2 回答

0
在Vue-cli项目中， axios 无法从自定义文件夹中获取数据 .

您应该使用 static 文件夹来保存测试json文件 .

所以你应该像这样改变 axios 电话：
```
axios.get('/static/service_general_info.json');
```
这将从json获取数据 .
回复于 2024-04-26T05:05:05+08:00
2
当从服务器进行http调用时，axios不知道你在http://localhost:8080上，你必须提供完整的URL .

像这样：
```
methods: {
    addData() {
      console.log('add json data...');
      axios.get('http://localhost:8080/data/service_general_info.json');
    },
  },
```
回复于 2024-04-26T05:05:05+08:00

vuejs：axios get请求的本地json文件的正确路径

2 回答

相关问题