vue项目用axios获取本地json

栋栋很优秀啊

于 2022-09-26 21:58:08 发布

阅读量958

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/dongdongaa0/article/details/127061897

html 同时被 3 个专栏收录

18 篇文章

订阅专栏

JavaScript

16 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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下
在这里插入图片描述