在vue文件中如何获取json文件中的数据

在Vue文件中获取JSON文件中的数据有多种方法，以下列出其中几种常见的方式。

1.使用Vue.js中的ajax（xhr）方法：

在Vue组件内使用ajax（xhr）请求获取JSON文件的数据，可以通过以下代码实现：

mounted() {
  var that = this;
  const request = new XMLHttpRequest();
  request.open('GET', '/data.json', true);
  request.onload = function () {
    if (request.status >= 200 && request.status < 400) {
      that.list = JSON.parse(request.responseText);
    } else {
      console.error('Error');
    }
  };
  request.onerror = function () {
    console.error('Error');
  };
  request.send();
}

2.使用Vue.js中的axios方法：

在Vue组件中使用axios库获取JSON文件的数据，可以通过以下代码实现：

created() {
  axios.get('/data.json')
    .then(response => {
      this.list = response.data;
    })
    .catch(error => {
      console.error(error);
    })
}

3.直接引用JSON文件：

如果JSON文件没有经过webpack打包处理，而直接以文件格式存在于项目文件夹中，可以在Vue组件中直接引用JSON文件获取数据，可以通过以下代码实现：

<script>
import List from './data.json'
export default {
  data() {
    return {
      list: List
    }
  }
}
</script>

需要注意的是，在使用以上方法时，需要通过相对路径或者绝对路径指定JSON文件的路径。