vue.cli3.0版本的用axios调用本地JSON数据报404解决方法

最新推荐文章于 2024-05-01 23:13:21 发布
最新推荐文章于 2024-05-01 23:13:21 发布
阅读量230 收藏 3
点赞数
文章标签： vue json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43399427/article/details/109384926
版权

首先看一下报的错是不是和我的一样
在这里插入图片描述
看了好多解决方案 有的说mock的，有的说static的，我文件里都没这俩哪来的报错啊哈哈

我这里解决的办法是把Json文件放到系统创建的public目录下面（和snode_modules目录同级的那个 。
在这里插入图片描述
然后以下两种写路径方式都可以
在这里插入图片描述
注意！不用再写一遍public了 因为默认已经在里面了。

运行后，值就传过来了：
在这里插入图片描述
谢谢观看

qq_43399427
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vite-vue3-admin：基于vite2.0 + vue3.0 + ant-design-vue2.0 +打字稿挂钩
03-03
vue3-antd 基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0的后台管理系统模板 账号：admin，密码：123456 系统模块数据是从先前获取来的真实数据，路由也是从内部动态获取的，而只是通过内网穿透提供访问的，难免发生访问失败的情况所以如果进入页面时提示网络错误，则需要再次刷新页面请求接口 使用了Vue3.0全家桶，ant-design-vue2.0和typescript4.0，实践vue3.0的新特性以及玩法，不得不说vue3.0的组成API比例于vue2.0的Options API灵活很多，让我们可以灵活地组合组件逻辑，我们可以很轻松的使用hooks的形式去代替以前mixins等的写法。 功能，组件的封装 动态表格（扩展了伸缩列功能，以及使用JSON schema配置生成表格）// TODO后续有待加强及完善 动态表单（满足基本的需求）/
在vue3.0使用axios请求本地数据显示404的解决方法
zhengxinming2015的博客
05-14 3519
在vue3.0使用axios请求本地数据显示404 vue3.0以后，静态文件的路径存放改为public文件夹,包括json数据。下面贴出本人在vue3.0里用axios请求本地json数据显示404的踩坑过程。 注意画红色线的那个路径，虽然vue3.0以后把静态文件都放在了public,但请求本地数据的时候，一定记得把**…/public**去掉，要不然就会出现404错误。如下图所示： 然后如果你刷新页面，就会出现如下错误： 所以一定要记住，vue3.0请求本地json数据，记得把**…/public
axios请求本地json文件——调用路径只支持相对路径形式 & 设置、获取、清除sessionStorage & 跨组件通信之父组件有provide选项提供数据，子组件有inject选项来使用数据
weixin_44867717的博客
03-28 428
src同层级，public文件夹下的static文件夹中，新建userInfo.json。src同层级，public文件夹下新建serverConfig.json。所以如果需要引用static目录下的图片及其他资源，应该使用绝对路径。
获取本地json文件
m0_50125215的博客
09-17 5698
获取本地JSON文件 请求报404错误,原因是vue-cli3.0之后创建的项目静态资源都放在了根目录下的public目录下，因此需要将json文件建在public目录下即可。
axios请求本地json文件
m0_45827438的博客
07-21 1397
【代码】axios请求本地json文件。
使用axios获取JSON文件数据（vue）
weixin_65314914的博客
08-07 4197
axios是一个基于Promise的HTTP客户端库，用于发送HTTP请求。它可以在浏览器和Node.js环境中使用，并提供了许多强大而且易于使用的功能，使得进行HTTP通信变得简单、直观和高效。axios的一些详细介绍：支持浏览器和Node.js环境：axios可以在浏览器和Node.js环境中都使用。这意味着你可以在多种前端和后端开发场景中统一使用axios进行网络请求。简单易用的API：axios提供了简洁、直观的API，使得发送HTTP请求变得非常容易。
vue使用axios获取本地json文件数据及创建本地数据接口
L20523的博客
12-25 2064
axios是前端必学的一个知识点，刚接触axios的同学可能会因为没有接口测试而犯难，本文教会你如何用axios获取本地json文件数据，以及创建本地数据接口。
axios请求本地json数据
m0_65048141的博客
06-08 784
利用axios请求获取本地json数据。
在vue-cli3中使用axios获取本地json操作
10-15
主要介绍了在vue-cli3中使用axios获取本地json操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
01-21
使用自己基于vue-cli 2.X改造的前端多页脚手架有近1年多时间了，一直没机会升级3.0版本 开始零零碎碎开始写一些功能，顺便分享一下 const path = require('path') const glob = require('glob') /** 获取多页的入口...
vue.js学习笔记:如何加载本地json文件
10-20
主要介绍了vue.js学习笔记:如何加载本地json文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。
详解如何配置vue-cli3.0的vue.config.js
12-02
本文介绍了如何配置vue-cli3.0的vue.config.js，分享给大家，具体如下： vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由...
Vue.js3.0核心源码解析
11-12
核心源码解析的的pdf版，具体的内容可以自行查看。
vue2.0+ axios如何读取本地json文件的数据
u014645827的博客
04-25 1664
1、用vue-cli搭建起一个hello-world（名字随意）的工程，不做任何修改。 2、引入Axios。 在入口文件main.ts中引入Axios import Axios from 'axios' import VueAxios from 'vue-axios' …… Vue.use(VueAxios, Axios); …… 3、在public文件夹中添加data.json文件 可能很多同学问题都出在这里，从网上搜索发现很多人说json文件应该放在assets目录或static目录下，但是..
axios 获取本地json文件
m0_64544033的博客
02-18 901
axios 获取本地json文件
教你如何使用vue里的axios获取本地的json数据
weixin_53000915的博客
03-05 1727
1、新建一个vue项目 在终端安装axios命令 npm install --save axios vue-axios 2、在main.js里导入下面的代码 import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,axios) 3、创建本地的json数据（ps：json文件一定要创建在public文件夹中） 4、在需要数据的页面引入axios 5、异步加载数据（链接是你打开vue页面的这个链接，后面的是
vue使用axios请求本地json文件
jieweiwujie的博客
07-29 3253
vue使用axios请求本地json文件
Java 基础重点知识-(泛型、反射、注解、IO)
最新发布
qq_43339789的博客
05-01 1153
什么是泛型? 泛型有什么用? 泛型原理是什么? Java 反射 什么是反射? 反射作用是什么? 动态代理有几种实现方式? 有什么特点? Java 注解 什么是注解, 作用是什么? Java I/O 什么是序列化? Java 是怎么实现系列化的? 常见的序列化协议有哪些? BIO/NIO/AIO 有什么区别? IO 多路复用是什么? select 和 epoll 有什么区别?
vue2脚手架，axios的baseURL如何根据环境文件使用，以及使用环境文件的详细步骤，以及npm如何引入env；vue.config.js中切换环境
06-07
在 Vue2 脚手架中，可以通过使用不同的环境文件来配置不同的 baseURL。下面是详细步骤： 1. 创建环境文件 在项目根目录下，可以创建以下三个环境文件： - `.env`：默认的环境文件，适用于所有情况。 - `.env....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值