Vue中请求本地JSON文件并返回数据的方法实例

可以采用 Vue-Resource 插件来请求本地JSON文件，并解析返回的数据。

第一步，需要在项目中引入 Vue-Resource 插件。可以通过以下命令进行安装：

npm install vue-resource --save

然后在 main.js 文件中引入 Vue-Resource 并使用：

import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

第二步，编写请求本地 JSON 文件的方法：

this.$http.get('/static/data.json').then((response) => {
    console.log(response.body);
}, (error) => {
    console.log(error);
});

其中，我们使用 $http.get 方法来请求 /static/data.json 这个本地 JSON 文件，然后在 then 方法中处理返回的数据。

第三步，例如我们有一个 product 组件，需要在组件初始化时请求本地 JSON 文件并使用数据进行渲染：

<template>
  <div>
    <ul>
      <li v-for="item in products" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: []
    }
  },
  mounted() {
    this.$http.get('/static/data.json').then((response) => {
      this.products = response.body;
    }, (error) => {
      console.log(error);
    });
  }
}
</script>

在上面的代码中，我们在 mounted 钩子函数中向服务器请求 data.json，并将返回的数据保存在组件的 products 数据属性中。然后在模板中使用 v-for 指令遍历 products 数组，并显示每个商品的名称。

示例2：

在以下示例中，我们将使用 axios 库请求本地 JSON 文件：

npm install axios --save

import axios from 'axios';

axios.get('/static/data.json').then((response) => {
    console.log(response.data);
}).catch((error) => {
    console.log(error);
});

使用 axios 发送 HTTP 请求，并在 then 回调函数中打印返回的 JSON 数据。在发生错误时，我们使用 catch 来处理错误。