在vue中读取本地Json文件的方法

当需要在Vue项目中读取本地的JSON文件时，可以使用 Vue.js 的 HTTP 客户端 Vue-resource 或者使用浏览器的原生 API fetch。 下面我将为您提供 Vue-resource 和 fetch 两种方法的使用详细攻略和示例。

一、使用Vue-resource获取本地JSON文件的方法

1. 安装Vue-resource

首先需要在Vue项目中安装Vue-resource。可以使用npm或yarn进行安装。

npm：

npm install vue-resource --save

yarn：

yarn add vue-resource

1. 在Vue中引入vue-resource

在Vue文件中引入安装好的vue-resource。

import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)

1. 使用Vue-resource读取本地JSON文件，并处理数据

在Vue文件中使用Vue-resource读取本地JSON文件，然后处理获取到的数据。

import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)

export default {
  data() {
    return {
      jsonData: []
    }
  },
  methods: {
    getJsonData() {
      this.$http.get('./data.json').then(response => {
          this.jsonData = response.body
      }, response => {
          console.log('Error! Could not reach the API. ' + response)
      })
    },
  },
  created() {
    this.getJsonData()
  }
}

此代码中，我们使用了 Vue-resource 的 $http 方法来获取 JSON 文件。在 getJsonData() 方法中，我们使用 $http.get() 方法从 data.json 文件中获取数据，然后在 response 对象中读取返回的响应数据。

1. 在Vue中呈现数据

在Vue中将数据呈现在页面上。

<template>
  <div v-for="data in jsonData" :key="data.id">
    <h2>{{data.title}}</h2>
    <p>{{data.body}}</p>
  </div>
</template>

二、使用fetch获取本地JSON文件的方法

1. 使用fetch读取本地JSON文件

在Vue文件中使用浏览器的原生API fetch加载JSON文件。

export default {
  data() {
    return {
      jsonData: []
    }
  },
  methods: {
    getJsonData() {
      fetch('./data.json')
      .then(response => response.json())
      .then(data => {
        this.jsonData = data
      })
      .catch(error => console.error(error))
    }
  },
  created() {
    this.getJsonData()
  }
}

这里用fetch('./data.json')来获取本地JSON文件，并通过response.json()方法将响应流（Response）转换为JSON对象。

1. 在Vue中呈现数据

在Vue中将数据呈现在页面上。

  <template>
    <div v-for="data in jsonData" :key="data.id">
        <h2>{{data.title}}</h2>
        <p>{{data.body}}</p>
    </div>
  </template>

注意：在fetch方式中由于fetch方法返回的是一个Promise对象，因此需要使用.then()方法设置获取到数据后的操作。

以上即为在Vue中读取本地JSON文件的两种方法：Vue-resource和fetch。不同的方法适用于不同的业务及需求场景。