Vue3实现通过axios来读取本地json文件
更新时间：2024年07月26日 10:22:12 作者：Kingsaj
这篇文章主要介绍了Vue3实现通过axios来读取本地json文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
一般前端mock数据或者数据量过大且不需要考虑安全问题，或者数据稳定不需要常做变更的场景
这些数据可以由前端进行维护，将数据转为json文件放到前端本地进行读取
本人在项目开发中，要实现地图的下钻功能，将各省市的json下载到了本地静态资源包中，结果请求时总是报错404
前端存放JSON文件的位置
我们的项目是通过vue-cli3创建的
vue-cli3版本脚手架对外暴露的静态文件入口是public文件夹(原来是static文件夹)
这里本地json文件也应该放在这里
请求JSON数据
直接通过axios请求即可
import axios from './$http'
// 静态数据
const API = {
// 关于我们 banner 图
getAboutBanner (url) {
return axios.get('/mock/AboutBanner.json')
}
}
export default API
特别注意
json文件存放在public目录下，如/public/template/province/jsonData.json
那么在请求json数据的时候
地址千万千万千万不能写/public/template/province/jsonData.json
而是写/template/province/jsonData.json
否则会报404，因为静态资源在打包后，默认public内的文件放在项目根目录
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇解决在vue项目中webpack打包后字体不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue3.0封装轮播图组件的步骤，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-03-03
这篇文章主要介绍了vue3网络请求添加loading过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要给大家介绍了关于Vue动态改变css样式的3种方法,在Vue.js中我们经常需要根据特定的条件或事件来动态地修改CSS样式,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了vue组件开发之tab切换组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
vue3出来好一段时间了,一直想着用一下,下面这篇文章主要给大家介绍了关于vue3使用element ui的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
vue的style绑定background-image的方式和其他变量数据的区别详解
今天小编就为大家分享一篇vue的style绑定background-image的方式和其他变量数据的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
解决vue打包 npm run build-test突然不动了的问题
这篇文章主要介绍了解决vue打包 npm run build-test突然不动了的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本文介绍了基于Vue2和Element-UI实现的高级穿梭框组件Transfer的设计与技术方案,组件支持多项选择,并能实时同步已选择项,包含竖版和横版设计稿,并提供了组件的使用方法和源码,此组件具备本地分页和搜索功能,适用于需要在两个列表间进行数据选择和同步的场景2024-09-09
下面小编就为大家分享一篇vue组件传递对象中实现单向绑定的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论