使用两种方式调用本地json文件(基于Vue-cli3脚手架)
更新时间：2023年10月20日 17:13:03 作者：酷酷的橙007
这篇文章主要介绍了使用两种方式调用本地json文件(基于Vue-cli3脚手架),具有很好的参考价值,希望对大家有所帮助,
使用两种方式调用本地json文件
在前端开发过程中，当后台服务器开发数据还没完善，无法与前端进行交接时，我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。
vue-cli3.0往后的项目基础架构对比旧版本有些区别。
以前大家都习惯在根目录下的static文件夹下创建json文件，然而vuecli3、4没有static文件夹了。
若创建一个static文件夹在下面存放json文件，在实际调用过程中会报错，提示请求404。
因此本文将提供两种方法调用本地的json文件。
1. 利用Axios请求调用本地json文件
Vue cli3削减掉static文件夹，取而代之的是在项目根目录下（与src同级）生成public文件夹，用于存放静态资源，如下图所示，可以将本地json文件放到public文件夹下。
利用axios的get请求方式，可以调用上述json文件。
axios.get('/confidence-band.json').then(res => {
console.log(res.data)
})
需注意，axios是异步的，如果转成同步进行，需要在外函数添加async，axios前加await。
2. import直接调用（推荐）
上述方式本地json文件必须存放指定位置，同时还要考虑同步异步的问题。
利用import引用，本地json文件无需存放指定位置，以存放assets文件夹下的json文件夹为例。
引用及调用：
import confidence_band_json from '@/assets/json/confidence-band.json' // 引用 let data = confidence_band_json // 调用
两种方式各自有使用场景，若无要求，建议使用第二种方式，调用更为简单。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了el-tree的实现叶子节点单选的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
本文主要介绍了vue3.x页面功能拆分方式，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
响应式就是当对象本身(对象的增删值)或者对象属性(重新赋值)发生变化时,将会运行一些函数,最常见的就是render函数,下面这篇文章主要给大家介绍了关于Vue3响应式原理的相关资料,需要的朋友可以参考下2022-12-12
vue proxytable代理根路径的同时增加其他代理方式
这篇文章主要介绍了vue proxytable代理根路径的同时增加其他代理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家介绍了Vue实现京东网站商品放大镜效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了详解vue-cli本地环境API代理设置和解决跨域，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要介绍了Vue中获取this.$refs为undefined的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
今天小编就为大家分享一篇vue+element-ui动态生成多级表头的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue组件间通信全面讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了vue使用swiper.js重叠轮播组建样式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
最新评论