vue项目用axios获取本地json

最新推荐文章于 2025-10-06 10:37:50 发布

原创最新推荐文章于 2025-10-06 10:37:50 发布 · 982 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

html 同时被 3 个专栏收录

18 篇文章

订阅专栏

JavaScript

16 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

本文介绍如何在Vue项目中通过Axios获取并解析位于public目录下的本地JSON文件。利用Vue的生命周期钩子created，发送HTTP请求到指定路径，并处理响应数据。

vue项目用axios获取本地json

在这里插入图片描述

代码

<template>
  <div class="box"></div>
</template>

<script>

import axios from 'axios'

export default {
  name: "demo",
  created() {
    axios.get('/a.json').then(res => {  //此时相当于访问 http://localhost:8080/chinaData/100000.json

      let {data} = res.data
      console.log('data', data)
      this.total = data.total
      this.recordsList = data.records
    })
  }
}
</script>

<style scoped>

</style>

json文件放到public下
在这里插入图片描述