在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创建本地数据接口的步骤：
- 安装
json-server：
npm install -g json-server- 创建一个json文件，比如
db.json，包含你的数据：
// db.json
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}- 在终端中运行
json-server：
json-server --watch db.json- 在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一样访问这个本地数据接口。