vue-cli3.x项目axios调用本地json数据

最新推荐文章于 2023-08-07 19:45:18 发布
最新推荐文章于 2023-08-07 19:45:18 发布
阅读量670 收藏
点赞数
分类专栏： Vue axios 文章标签： vue.js json 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27868533/article/details/121293405
版权
Vue 同时被 2 个专栏收录
15 篇文章 2 订阅
订阅专栏
axios
2 篇文章 0 订阅
订阅专栏

今天各种尝试用axios调取本地的json文件，发现都是404，明显路径不对，瞎折腾了一下午才发现vue-cli3的index.html是再public文件夹下，所以"/"对应的路径就是public文件夹，只需要把json文件放到public文件夹下就可以了

axios.get("/xxxx.json")
摸路
关注
专栏目录
vue-cli 3.x 项目打包配置-vue.config.js
pamerely的博客
04-14 4126
这里写自定义目录标题前言npm run build配置-package.json.env.dev文件.env.prod文件vue配置文件-vue.config.js路由改成hash模式-router.js插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图...
vue-cli2.x 获取线上api 接口 mock虚拟数据
兜裡全是糖的博客
11-04 708
vue-cli 获取线上api 接口数据 1.新建在线接口 在线接口管理(支持mock语言) 在线接口链接 进入-> 注册,登录-> 创建仓库 ->点击仓库名进入仓库, 里面有个示例接口, 可以仿照示例新建自己需要的接口 (不懂mock语法可以去mock官网看一下使用示例) 新建接口: 左上角新建 点右上角编辑,进行编辑,在响应内容输入名称,类型,规则和初始值,输入就能看到数据结果(数据是随机的,刷新便会更新) 获取api 接口 url 点击 红色 的/table/list 跳转
在vue-cli3中使用axios获取本地json操作
10-15
主要介绍了在vue-cli3中使用axios获取本地json操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
搭建Vue项目，并简单的使用axios获得json文件中的数据
qq_43710807的博客
07-30 4911
搭建Vue项目，并简单的使用axios获得json文件中的数据 实训学了几天vue，大作业要求小组做一个仿电商网站，主要就是使用vue框架，然后把要做的页面分为几个组件，分工做，最后再整合。 通过查阅网上资料，最后整理出来的实际过程： 搭建一个vue项目 安装node.js https://nodejs.org/zh-cn/download/ 下载最新版（长期支持）10.16.10 检查安装 ...
Vue3通过axios来读取本地json文件
King Saj
09-17 4583
前言 一般前端mock数据或者数据量过大且不需要考虑安全问题，或者数据稳定不需要常做变更的场景，这些数据可以由前端进行维护，将数据转为json文件放到前端本地进行读取。 本人在项目开发中，要实现地图的下钻功能，将各省市的json下载到了本地静态资源包中，结果请求时总是报错404 正题 前端存放JSON文件的位置 我们的项目是通过vue-cli3创建的，vue-cli3版本脚手架对外暴露的静态文件入口是public文件夹(原来是static文件夹)，这里本地json文件也应该放在这里 请求JSON数据 直接
vue-cli3里面使用axios去请求public里面的数据
qq_43653325的博客
05-17 2979
恨不得要去咬这个axios, 如果它有实体的话, @@#!!! 之前一直给我报404 又给我报跨域错误, 害我之前去配置了一个proxy… 后来发现, 完全不是跨域问题, 就是 /file 的前面多加了一个点 正确格式如下: import axios from "axios"; axios.get('/file/map.json').then(res=>{ console.lo...
详解vue-cli 脚手架项目-package.json
10-19
对于使用`vue-cli`创建的项目而言，`package.json`文件扮演着核心角色，它不仅定义了项目的元数据，还包含了项目的配置信息、脚本命令及项目依赖等。 #### 项目元数据 `package.json`文件首先定义了一些基本的项目...
使用vue2.x + vue-cli +vue-router+ vuex + axios + mysql + exp.zip
最新发布
02-23
常见的文件和目录可能包括`src`（源代码）、`public`（静态资源）、`vue.config.js`（Vue CLI的配置文件）、`package.json`（项目依赖和脚本）、`database.sql`（MySQL数据库脚本）等。 在实际开发中，这个项目可能...
Vue中使用本地json数据
Dreamer_xr的博客
09-06 9179
项目中有有一个地区接口，服务器原因请求速度很慢很慢，于是考虑将地区接口的数据设置为本地的json文件。大大提升请求速度 一、首先创建一个json文件，将数据放进去，一定要确保格式正确我的是这样的，把json文件放在static文件夹下，                       二、像使用axios一样去调用json文件，因为我的axios配置的时候设置的是$ajax = axios ...
vue中axios实现数据交互与跨域问题
10-17
主要介绍了vue中axios实现数据交互与跨域问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Vue的axios使用本地模拟数据
weixin_44460248的博客
02-12 893
第一步：修改webpack.dev.conf.js配置，在const portfinder = require(‘portfinder’)后面添加下面的话 //获取本地数据开始 const express =require(‘express’) const app =express() var appData=require("…/mock/goods") var goods=appData.r...
vue-cli项目中使用Axios调用本地模拟的评论数据
wanglingli95的博客
02-26 837
需求： 使用Axios的get方法调用本地模拟的评论数据 将获得的评论数据显示在页面上，模拟的评论数据详见health.json文件。 health.json文件： 链接：https://pan.baidu.com/s/1_f3rKXSEse7QoJ_FZtfGuA 提取码：2jf5 实现过程： 将health.json文件放到static文件夹下。 在main.js中引入axios，并将axios挂载到vue原型。 import axios from 'axios' // 只能把axio
Vue中请求本地JSON文件并返回数据
qq_52721978的博客
11-08 3811
输入命令 npm install -g json-server 全局安装。3.检查一下自己是否安装过json-server(没安装的话安装一下)直接用aixos就可以请求到自己本地的json文件了。4.安装完成以后我们就可以运行自己的json文件了。1. 首先在根目录pulic下面建个json文件。2.json文件的内容 和接口类似的数据格式。
使用axios获取JSON文件数据（vue）
weixin_65314914的博客
08-07 5156
axios是一个基于Promise的HTTP客户端库，用于发送HTTP请求。它可以在浏览器和Node.js环境中使用，并提供了许多强大而且易于使用的功能，使得进行HTTP通信变得简单、直观和高效。axios的一些详细介绍：支持浏览器和Node.js环境：axios可以在浏览器和Node.js环境中都使用。这意味着你可以在多种前端和后端开发场景中统一使用axios进行网络请求。简单易用的API：axios提供了简洁、直观的API，使得发送HTTP请求变得非常容易。
vue3中前端处理不同数据结构的JSON
故里2130
03-03 1万+
有时候，后端返回的JSON数据格式，是前端不需要的格式类型，这时，要么让后端修改，你要什么格式，那么让后端大哥哥给你返回什么格式。但是有时候不尽人意，后端大哥哥让你自己转换，此时就甩给前端了，只能在前端自己处理了。
vue发axios请求本地数据及vant组件使用
qq_45911604的博客
04-27 834
vue发axios请求本地数据及vant组件使用
VUE3如何读取本地json文件
黑坑的专栏
11-08 1万+
VUE3如何读取本地json文件
vue-cli3中如何使用axios获取本地的json数据
热门推荐
huangguangyourena的博客
06-21 2万+
最近正在写自己的个人博客项目，所以遇到的问题都会放到csdn中。 那么开始吧。 首先我们要确定json数据存放的位置，在vue-cli3中，存放静态资源的位置已经变成存放在public文件夹中了，如下图。所以如果要获取本地的json数据，那么首先要把数据放到这个文件夹下。 由于我在项目中使用了vuex，因此我把aioxs获取数据写在了vuex的actions,如下图，这里在actions中使用...
Vue-cli移动端布局与动画实战指南
最后，如何在项目中集成axios进行HTTP请求，文章会指导读者如何安装axios，以及如何在Vue组件中调用axios来发送GET、POST等请求，并处理响应数据。这篇指南为开发者提供了全面的Vue-cli移动端开发指南，有助于提升...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值