获取本地json文件

Yolo416

于 2022-09-17 15:02:22 发布

阅读量6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue项目前端基础文章标签： json javascript 前端

本文链接：https://blog.csdn.net/m0_50125215/article/details/126905322

前端基础同时被 2 个专栏收录

59 篇文章

订阅专栏

vue项目

12 篇文章

订阅专栏

本文介绍了在Vue项目中获取本地JSON文件的三种方式：直接在Vue组件中引用，使用axios发起GET请求，以及通过require引入。特别指出在Vue CLI 3.0以后，静态资源需放在public目录下，以避免404错误。

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

方法一：vue中获取本地json文件

//通过json文件路径引入
import jsonData from './***.json'
//定义一个变量用于接收数据
data() {
    return {
      commonJson: {},
   }
}
//接收数据
mounted() {
    this.commonJson= jsonData 
    console.log(this.commonJson) 
},

方法二：使用axios发起get请求获取对应的json文件数据

import axios from 'axios'  // 安装axios后引入
Vue.prototype.$axios = axios  // 将axios挂载到原型上方便使用
 
// 使用get请求获取到test.json文件的数据
this.$axios.get('./test.json').then(res => {   
    console.log(res)
})

请求报404错误,原因是vue-cli3.0之后创建的项目静态资源都放在了根目录下的public目录下，因此需要将json文件建在public目录下即可

// json文件放在public下
// 访问路径不用带public ，直接访问public下的文件即可
this.$axios.get("./data/test.json", {}).then(response => {
  console.log(response)
}）

// json文件放在static下
// 访问路径带static
this.$axios.get("./static/data/test.json", {}).then(response => {
  console.log(response)
}）