vue使用axios获取本地json文件数据及创建本地数据接口

在Vue中使用axios获取本地json文件数据，可以通过相对路径的方式来实现。以下是一个简单的示例：

首先，假设你有一个本地的json文件，比如data.json，放在Vue项目的public文件夹下：

// public/data.json
{
  "message": "Hello, Vue with Axios!"
}

然后，你可以在Vue组件中使用axios来获取这个json文件的内容：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      message: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('data.json') // 注意路径是相对于public文件夹的
        .then(response => {
          this.message = response.data.message;
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
    }
  }
};
</script>

在上述代码中，我们在组件的created生命周期钩子中调用了fetchData方法，该方法使用axios来异步获取public/data.json文件的内容，并在获取成功后将数据赋值给组件的message数据属性，以便在模板中展示。

创建本地数据接口，可以使用工具如json-server来快速搭建一个RESTful API。以下是如何使用json-server创建本地数据接口的步骤：

1. 安装json-server：

npm install -g json-server

2. 创建一个json文件，比如db.json，包含你的数据：

// db.json
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

3. 在终端中运行json-server：

json-server --watch db.json

4. 在Vue组件中使用axios来调用这个本地API：

axios.get('http://localhost:3000/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('An error occurred:', error);
  });

在这个例子中，json-server会监听本地3000端口的请求，并根据db.json中定义的数据进行响应。你可以通过axios像访问远程API一样访问这个本地数据接口。