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.use()的作用及原理解析，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
下面小编就为大家分享一篇Vue父组件调用子组件事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
本文主要介绍了在VueRouter中,meta对象的使用和配置方式,meta对象可以包含任何你希望附加到路由的自定义信息,这些配置信息可以灵活的满足你的应用需求,使得路由配置更具灵活性和可扩展性2024-10-10
Vue 最独特的特性之一，是非侵入式的响应系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。本文将通过示例详解Vue的响应式原理，感兴趣的可以了解一下2022-03-03
这篇文章主要介绍了vue、react等单页面项目应该这样子部署到服务器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
详解vue之自行实现派发与广播(dispatch与broadcast)
这篇文章主要介绍了详解vue之自行实现派发与广播(dispatch与broadcast)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了Vite的原理，Vite是一个更轻、更快的web应用开发工具，面向现代浏览，Vite创建的项目是一个普通的Vue3应用，相比基于Vue-cli创建的应用少了很多配置文件和依赖，下面基于Vite相关资料内容，需要的朋友可以参考一下2022-02-02
这篇文章主要介绍了浅谈Vue知识系列-axios，本文章内容详细，具有很好的参考价值，希望对大家有所帮助，需要的朋友可以参考下<BR>2023-01-01
最近项目开发中遇到一个需求,需要实现宽度自动适应,所以下面这篇文章主要给大家介绍了关于Vue前端项目自适应布局的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
Vue配置marked链接添加target="_blank"的方法
这篇文章主要介绍了Vue配置marked链接添加target="_blank"的方法，文中给大家提到了vue实现类似target="_blank"打开新窗口的代码,感兴趣的朋友参考下吧2019-07-07
最新评论