vue本地请求json 报错404 解决方法来了

最新推荐文章于 2024-04-07 17:53:50 发布
原创 最新推荐文章于 2024-04-07 17:53:50 发布 · 5.6k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #vue

本文介绍了一种在Vue CLI 3.0项目中成功请求本地JSON文件的方法。起初尝试将JSON文件放置在static文件夹下但未成功，最终通过在public文件夹内创建JS文件并引入JSON数据的方式解决了404错误。

请求本地文件报错404 试了几种方法这种成功了

先开始是看见网上说是

要这样 不管localhost还是../

新建一个static文件夹 本地json放这个下面 目录要和src同级

结果没用照常报错

继续找答案

看见一个网友说可能vuecli3.0生成的项目，静态文件变成了public文件。

最开始请求的static的文件中的json也是报错，就查看了很多的资料最后发现改了

本地请求需要在public文件中新建一个js文件，在js文件中添加json的本地数据文件

照着一做还真的是

终于成功了 返回我了数据  谢谢那个网友 

 

是这位 没注册 就没有点赞啦 哈哈哈 内心感谢你

Exhalexujing
关注
vue2/3 - 使用mock模拟数据，axios发送请求时报错Request failed with status code 404报错，请求数据报错404，vue mock.js 报错详细解决！
高级前端工程师
07-10 3033
vue，nuxt，mock，插件，模拟请求接口数据，报错，用mockjs模拟数据，axios发送get请求时出错，路径没问题为什么会404，接口地址没有错，请求数据报错404，http请求出现了问题，axios，详细解决教程，404，mock.js请求数据报错404，vue报错解决，浏览器，请求，URL请求地址，正确，错误，Request failed with status code 404，vue报错解决:mock.js请求数据报错404_vue中使用mockjs没有数据，vue-cli中mock本地j
vue使用fetch发送json格式的post请求报错解决方法
weixin_45295262的博客
09-16 4746
学习vue的fetch发送post的json格式数据请求时发生了跨域报错，自己解决不了，常规操作上网看博客，找了很久，都是说在后台服务器设置跨域允许，但是我明明设置了呀，我看的黑马教程，明明和视频一毛一样了还是不行…一脸问号,终于在找了很久后迎来了曙光…废话不多说… 前台发送请求的代码： fetch('http://localhost:3000/books', { method: 'post', body: JSON.stringify({
vue使用axios获取本地json文件数据及创建本地数据接口
L20523的博客
12-25 5865
axios是前端必学的一个知识点，刚接触axios的同学可能会因为没有接口测试而犯难，本文教会你如何用axios获取本地json文件数据，以及创建本地数据接口。
vue请求本地json文件出现404的问题
Z_ckiy的博客
04-11 1310
尝试过以下两种情况都不行： 1.将json文件放入根目录下的static文件中 2.将json文件放入根目录下的public文件中 最后解决方法： 将json文件放入根目录下的public文件中的js文件中 在引用的时候因为public是向外曝露的服务器路径，但在引用时，不用写“public” 就好了 ...
VUE中axios请求本地json，报404
yueyekkx的博客
04-22 3499
刚接触vue不是很熟，这个问题一直困惑很长时间。 vue cli2和vue cli3搭建的项目两种不同的目录结构； 一种有static目录；静态资源存放在static下 高版本没有static目录，有public目录；静态资源存放在public下 所以解决方案也不一样； 1、static版 axios.get("./static/json/map/100000.json", {}) ...
vue +axios 项目本地引入json 出现404
weixin_38069018的博客
02-25 909
vue + axios 引入本地json 出现404 检查以及解决方案： 1 检查静态资源是否放在static文件夹下 或public文件夹下 注意：在vue-cli项目中，我们静态资源只能放在static文件夹中，axios使用get请求 vue-cli 创建的文件目录，如果是只有 public 而没有 static 文件夹，则直接将 json 文件放入 public 文件夹中，并且请求的时候不要带上 public ，直接 ‘./xxx.json’ 即可 ...
在 vue 中请求本地 json 数据一直 404 的解决办法
threewhisky的博客
04-13 3237
问题 在做项目的过程中，用 axios 以相对路径写法访问本地 json 数据一直404。 原理 当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。 它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。 -------引自vue-cli 官网 HTML 和静态资源 所以原因是相对路径写法使得打包后的项目找不到文件路径。 解决办法 在用 axios 时使用绝对路
vue代理配置没问题但是报错404
onecaicai的博客
11-13 1084
vue代理没错但是报错404
vue中img src 动态加载本地json的图片路径写法
10-17
总结起来，Vue中动态加载本地JSON文件中的图片路径，需要确保JSON文件和图片都在`static`目录下，然后在Vue组件中使用`v-bind`和`require`函数结合动态方法来实现图片的动态加载。同时，记得在webpack配置中设置正确...
浅谈vue中get请求解决传输数据是数组格式的问题
10-15
对比`qs.stringify()`和`JSON.stringify()`，两者的主要区别在于，`qs.stringify()`适合于URL编码，将对象转换为查询字符串，而`JSON.stringify()`则将对象转换为JSON字符串，常用于服务端的JSON数据解析。...
vue访问本地public文件夹下面的文件 404
云
07-19 1456
vue访问本地public文件夹下面的文件 404
【vue cli获取本地json数据总是404报错】
weixin_45460226的博客
05-06 956
vue cli获取本地json数据总是404报错vue cli版本查看创建本地json数据 vue cli版本查看 创建项目后 vue -V 查看脚手架版本，一般看文件目录就能看了 vue-cli版本是2.0左右的就会有webpack的config目录 vue-cli版本是3.0以上的就会有vue.config.js没有config目录 为什么会要先查看脚手架版本就是之后会出现的问题有关 创建本地json数据 vue-cli2.0将本地json数据放到目录static目录下 然后用请求就行了 这是vue
vue.config.js配置proxy代理产生404错误的原因
jiaohuizhuang6019的博客
10-16 4457
vue.config.js配置proxy代理产生404错误的原因
vue 使用本地模拟json数据axios调用时报错404 ，最佳解决方案
在写作的路上持续输出。
03-27 3083
vue使用 axios 调用本地模拟数据 时报错404 ，最佳解决方案
部署在服务器上的应用请求json文件返回404解决方法及原因分析
热门推荐
大V的博客
11-14 1万+
解决方法最近在做项目的时候，碰到了一个怪事儿，明明json文件放在服务器对的位置，url也查了好几遍，但是每次请求json文件时，却总是返回404找不到文件。
vue中使用axios访问本地json文件404
J1756465965的博客
03-08 1408
axios访问本地数据报错
React项目 fetch 本地json文件 404问题
zwkkkk1的博客
07-25 7799
  今天在搞项目的时候，想要在React项目中fetch本地的json文件却一直报404。   网上的解决方案，差不多说地址都是相对于首页index.html而言，所以将json数据放在相对index.html上就好了。   可是鼓捣了个把小时还是没有解决问题。据我观察，网上的解决方案都是基于 create-react-app 的项目，而我的项目是自己集成的环境。   为了验证网上的解决方案...
json-server踩坑请求一直报错404 not found
最新发布
qq_36808770的博客
04-07 732
json-server启动成功，可正常访问报错接口。
Update check failed: Error: Manifest request to .hot-update.json timed out. 热更新失败！
qq_38402659的博客
06-06 4565
Uncaught (in promise) Error: Manifest request to /48e3e4f951b46a4712d2.hot-update.json timed out. at XMLHttpRequest.request.onreadystatechange pdate check failed: Error: Manifest request to /48e3e4f9...
vue动态使用import路由懒加载报错解决方法
07-24
Vue动态使用import路由懒加载报错的解决方法有以下几种： 1. 检查webpack版本：在使用动态import加载组件时，需要确保webpack版本高于2.4.0。如果webpack版本过低，可以通过升级webpack来解决该问题。 2. 使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值