vue读取本地json文件,代码示例

温馨提示：这篇文章已超过288天没有更新，请注意相关的内容是否还可用！

Vue可以通过使用axios库来读取本地的JSON文件。我们需要在项目中安装axios库。在终端中运行以下命令：

npm install axios

接下来，在Vue组件中，我们可以使用axios的get方法来获取本地的JSON文件数据。我们需要使用`require`函数来引入JSON文件，并使用axios的get方法发送请求。在请求成功后，我们可以通过`response.data`来获取JSON文件的内容。

下面是一个示例代码：


<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      items: []
    };
  },
  mounted() {
    axios.get(require('@/assets/data.json'))
      .then(response => {
        this.items = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

在上面的示例代码中，我们在`mounted`生命周期钩子函数中使用axios的get方法来获取本地的JSON文件。我们使用`require`函数来引入JSON文件，路径以`@/assets/data.json`为例。当请求成功后，我们将获取到的JSON数据赋值给`items`数组，然后在模板中使用`v-for`指令来遍历数组并渲染列表项。

这样，Vue就可以读取本地的JSON文件并将其内容展示在页面上了。

vue读取本地json文件,代码示例

相关阅读