vue里的axios如何获取本地json数据

作者:yuhuamei

这篇文章主要介绍了vue里的axios如何获取本地json数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

使用axios获取本地json数据

第一步:在已有的vue项目中安装axios命令

npm install --save axios

第二步:在main.js里导入下面的代码

import axios from 'axios'

第三步:在static文件夹下添加testData文件夹,在这个文件夹下添加data.json文件

第四步:在需要数据的页面引入axios,异步加载数据

import axios from 'axios';
export default {
	name:"",
	data() {
		return{}
	mounted(){
		this.loadData();
	methods:{
		async loadData(){
			await axios.get("http://localhost:8080/static/testData/data.json").then(res =>{
			console.log(res);

使用axios获取本地json文件,报404错

昨天刚写的文章,使用axios获取到本地json文件,今天重启项目莫名其妙就报错了

又查询了一番,折腾了几个小时,找不出原因。重新百度了一番,最终解决。但是再下次运行是否还会报错,不太确定,毕竟没有找到最终的原因。

解决方案:main.js里

import axios from "axios";
Vue.prototype.axios = axios;

json文件存放在public文件夹下

在要用到的页面上

网上的教程一直都有要在main.js里加那两行代码,但是我发现我注掉的话也不影响结果。

所以尝试的时候还是按自己的来,能出来效果就行

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • Vue+Canvas绘图使用的讲解
    Vue+Canvas绘图使用的讲解
    2022-08-08
  • Vue-Luckysheet的使用方法及遇到问题解决方法
    Vue-Luckysheet的使用方法及遇到问题解决方法
    2022-08-08
  • vue使用Echarts设置数据无效问题记录及解决方法
    vue使用Echarts设置数据无效问题记录及解决方法
    2022-08-08
  • vue3+ts如何通过lodash实现防抖节流详解
    vue3+ts如何通过lodash实现防抖节流详解
    2022-08-08
  • vue里的axios如何获取本地json数据
    vue里的axios如何获取本地json数据
    2022-08-08
  • vue项目及axios请求获取数据方式
    vue项目及axios请求获取数据方式
    2022-08-08
  • vue事件监听函数on中的this指针域使用
    vue事件监听函数on中的this指针域使用
    2022-08-08
  • Vue浅析axios二次封装与节流及防抖的实现
    Vue浅析axios二次封装与节流及防抖的实现
    2022-08-08
  • 美国设下计谋,用娘炮文化重塑日本,已影响至中国
    美国设下计谋,用娘炮文化重塑日本,已影响至中国
    2021-11-19
  • 时空伴随者是什么意思?时空伴随者介绍
    时空伴随者是什么意思?时空伴随者介绍
    2021-11-09
  • 工信部称网盘企业免费用户最低速率应满足基本下载需求,天翼云盘回应:坚决支持,始终
    工信部称网盘企业免费用户最低速率应满足基本下载需求,天翼云盘回应:坚决支持,始终
    2021-11-05
  • 2022年放假安排出炉:五一连休5天 2022年所有节日一览表
    2022年放假安排出炉:五一连休5天 2022年所有节日一览表
    2021-10-26
  • 电脑版 - 返回首页

    2006-2023 脚本之家 JB51.Net , All Rights Reserved.
    苏ICP备14036222号