vue 项目如何读取本地json文件数据

在项目根目录有一个static文件夹目录，将所需要的json文件放在该static目录下，使用axios发起get请求获取对应的json文件数据

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

在vue-cli3及以上版本创建的项目这样请求会报404错误，原因是vue-cli3.0之后创建的项目静态资源都放在了根目录下的public目录下，因此需要将json文件建在public目录下，
请求的地址需要改变，如下：

this.$axios.get('/test.json').then(res => {     // 获取public下的test.json文件数据console.log(res)
})

经测试，public中嵌套文件夹后仍然可以读取

// 获取public下 data 文件夹中的test.json文件数据
import axios from 'axios'
// 局部使用
const service = axios.create({baseURL: '', // 请求本地json文件，那么baseURL取空字符串，域名就会是项目域名
timeout: 30000,
});
service.get('/data/test.json').then(res => {     console.log(res)
})

https://www.i4k.xyz/article/Boale_H/107039649

vue 项目如何读取本地json文件数据相关推荐

vue获取本地php数据,Vue-cli项目获取本地json文件数据的实例
下面我就为大家分享一篇Vue-cli项目获取本地json文件数据的实例,具有很好的参考价值,希望对大家有所帮助. 在自己做的vue demo项目中,我想通过在本地添加一些json数据,写到json文件 ...
Vue.js读取本地json文件并分页显示
Vue.js读取本地json文件并分页显示 1.功能实现通过axios异步加载技术读取本地的json文件内容,并通过vue.js处理数据在h5页面分页显示(这里以3行数据分页) 2.student. ...
JS读取本地CSV文件数据
JS读取本地CSV文件数据文件中的部分数据如图需求是需要提取出文件的数据使用到的模块是 Papa Parse 1. 依赖安装 yarn add papaparse papaparse的基本使用可 ...
Echarts读取本地json文件渲染轨迹，亲测ok
Echarts读取本地json文件渲染轨迹,亲测ok 1. 报错及解决 2. 效果图 3. 源码lines-track.html如下参考 1. 报错及解决报错:由于浏览器的同源策略已拦截跨源请求 ...
jquery ajax json文件,jQuery ajax读取本地json文件
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...
JS 变量保存为本地json文件，读取本地json文件为变量
一.变量保存为本地json文件: 第一步:把返回的数据转成json格式 var content = json.stringify(data); 第二步:把转成blob这种格式 ...
php读本地json文件内容,php读取本地json文件有哪些方法
这次给大家带来php读取本地json文件有哪些方法,php读取本地json文件的注意事项有哪些,下面就是实战案例,一起来看一下. 1.data.json文件{ "goods":[ ...
android mp3 lrc歌词文件utf-8歌词显示为乱码,Android读取本地json文件的方法(解决显示乱码问题)...
本文实例讲述了Android读取本地json文件的方法.分享给大家供大家参考,具体如下: 1.读取本地JSON ,但是显示汉字乱码 public static String readLocalJson ...
Vue3通过axios来读取本地json文件
前言一般前端mock数据或者数据量过大且不需要考虑安全问题,或者数据稳定不需要常做变更的场景,这些数据可以由前端进行维护,将数据转为json文件放到前端本地进行读取. 本人在项目开发中,要实现地图的 ...

vue 项目如何读取本地json文件数据

vue 项目如何读取本地json文件数据相关推荐

最新文章

热门文章