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

最新推荐文章于 2025-05-29 17:50:25 发布
最新推荐文章于 2025-05-29 17:50:25 发布
阅读量5.5k 收藏 14
点赞数 9
CC 4.0 BY-SA版权
文章标签： vue.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Exhalexujing/article/details/109536196
本文介绍了一种在Vue CLI 3.0项目中成功请求本地JSON文件的方法。起初尝试将JSON文件放置在static文件夹下但未成功，最终通过在public文件夹内创建JS文件并引入JSON数据的方式解决了404错误。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

请求本地文件报错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 2847
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
VueCil代理本地proxytable无效报错404的解决方案
JCat的博客
04-29 1万+
前言 因为项目中遇到了这个bug：Vue代理本地proxytable成功，却无效报错404，在后端和代理都配置无误的情况下，还是报404，先已解决，特记录，希望能帮助到他人； 正文 1. 为什么要使用代理？ 代理的作用是：把请求代理转发到其他服务器的中间件； 例如：我们当前主机为http://localhost:8080/，现在我们有一个需求，如果我们请求/api，我们不希望由3000来处理这个请...
vue请求本地json文件出现404的问题
Z_ckiy的博客
04-11 1288
尝试过以下两种情况都不行： 1.将json文件放入根目录下的static文件中 2.将json文件放入根目录下的public文件中 最后解决方法： 将json文件放入根目录下的public文件中的js文件中 在引用的时候因为public是向外曝露的服务器路径，但在引用时，不用写“public” 就好了 ...
React项目 fetch 本地json文件 404问题
zwkkkk1的博客
07-25 7654
  今天在搞项目的时候，想要在React项目中fetch本地的json文件却一直报404。   网上的解决方案，差不多说地址都是相对于首页index.html而言，所以将json数据放在相对index.html上就好了。   可是鼓捣了个把小时还是没有解决问题。据我观察，网上的解决方案都是基于 create-react-app 的项目，而我的项目是自己集成的环境。   为了验证网上的解决方案...
[解决]在 Vue 3 使用 Vite 开发的项目中，放在 public 文件夹里的文件，在打包部署后出现 404 的问题
最新发布
When you can't win by being better, you can win by being different.
05-29 929
这通常是因为在 Vite 的配置或者构建过程中，这些文件没有被正确处理。public文件夹在 Vite 项目中扮演着静态资源托管的角色，但需要注意一些特定的配置和操作步骤来确保这些文件能够被正确访问。
在 vue 中请求本地 json 数据一直 404 的解决办法
threewhisky的博客
04-13 3192
问题 在做项目的过程中，用 axios 以相对路径写法访问本地 json 数据一直404。 原理 当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。 它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。 -------引自vue-cli 官网 HTML 和静态资源 所以原因是相对路径写法使得打包后的项目找不到文件路径。 解决办法 在用 axios 时使用绝对路
vue代理配置没问题但是报错404
onecaicai的博客
11-13 1029
vue代理没错但是报错404
vue访问本地public文件夹下面的文件 404
云
07-19 1399
vue访问本地public文件夹下面的文件 404
【vue cli获取本地json数据总是404报错】
weixin_45460226的博客
05-06 941
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中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+webpack 打包文件 404 页面空白的解决方法
11-30
综上所述，解决Vue+Webpack打包后404页面空白的问题，主要涉及到服务器配置（如Nginx的try_files规则）、静态资源路径设置（通过Vue CLI的`publicPath`）以及Babel的正确配置（`.babelrc`文件）。通过调整这些配置，...
vue.config.js配置proxy代理产生404错误的原因
jiaohuizhuang6019的博客
10-16 4289
vue.config.js配置proxy代理产生404错误的原因
vue 使用本地模拟json数据axios调用时报错404 ，最佳解决方案
在写作的路上持续输出。
03-27 2999
vue使用 axios 调用本地模拟数据 时报错404 ，最佳解决方案
部署在服务器上的应用请求json文件返回404解决方法及原因分析
热门推荐
大V的博客
11-14 1万+
解决方法最近在做项目的时候，碰到了一个怪事儿，明明json文件放在服务器对的位置，url也查了好几遍，但是每次请求json文件时，却总是返回404找不到文件。
vue中使用axios访问本地json文件404
J1756465965的博客
03-08 1376
axios访问本地数据报错
json-server踩坑请求一直报错404 not found
qq_36808770的博客
04-07 625
json-server启动成功，可正常访问报错接口。
Update check failed: Error: Manifest request to .hot-update.json timed out. 热更新失败！
qq_38402659的博客
06-06 4537
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-cli3及以上版本引入本地json数据报404 解决方案
weixin_46313540的博客
06-29 814
首先，我们要明确自己现在正在用的Vue-cli是什么版本，因为这可能是导致你引用本地数据报404的原因。 Vue-cli2和Vue-cli3有很多区别，其中一个是：Vue-cli2中静态文件夹是static，而在Vue-cli3中静态文件夹变成了public，没有static 在Vue-cli2中，我们把一些静态文件放到static文件夹下，而在Vue-cli3中，我们必须把静态文件放到public文件夹下，不需要再次新建static文件 至此，你可以看下你的json数据是否有放错位置。 我们直接在pu
vue动态使用import路由懒加载报错解决方法
07-24
### 回答1： Vue动态使用import路由懒加载报错的解决方法有以下几种： 1. 检查webpack版本：在使用动态import加载组件时，需要确保webpack版本高于2.4.0。如果webpack版本过低，可以通过升级webpack来解决该问题。 2. 使用babel插件：在项目的.babelrc或babel.config.js配置文件中添加@babel/plugin-syntax-dynamic-import插件。该插件可以让babel正确解析动态import语法，避免报错。 3. 检查文件路径：在使用import语句加载组件时，需要确保文件路径是正确的。例如，如果组件文件是相对于当前文件的子目录中的某个文件夹，则需要使用正确的相对路径进行导入。 4. webpack配置修改：在webpack的配置文件中，检查是否正确配置了babel-loader和vue-loader。确保它们在处理代码时正确地解析import语法。 5. 检查网络请求：如果动态import的组件是从远程服务器获取的，检查网络连接是否正常。如果网络请求失败，可能导致组件无法正确加载。 6. 清除缓存：有时，旧的编译缓存可能导致动态import报错。可以尝试清除项目的缓存，重新编译项目，看看问题是否得到解决。 通过以上方法，可以解决Vue动态使用import路由懒加载报错的问题，确保组件能够正常加载和使用。 ### 回答2： vue动态使用import路由懒加载报错的解决方法有以下几种： 1. 使用require.ensure： 在Vue中，可以使用require.ensure来实现路由懒加载。在使用import懒加载时，如果出现报错，可以尝试将import替换为require.ensure，使用回调函数来处理异步加载的组件。具体操作如下： ```javascript component: resolve => { require.ensure([], () => { resolve(require('@/components/ExampleComponent.vue')); }); } ``` 2. 使用@babel/plugin-syntax-dynamic-import插件： 如果项目已经配置了Babel，可以尝试安装@babel/plugin-syntax-dynamic-import插件来解决报错。具体操作如下： 安装插件： ```shell npm install --save-dev @babel/plugin-syntax-dynamic-import ``` 在.babelrc文件中添加插件： ```json { "plugins": ["@babel/plugin-syntax-dynamic-import"] } ``` 然后在路由文件中使用import懒加载： ```javascript component: () => import('@/components/ExampleComponent.vue') ``` 3. 检查babel.config.js配置： 如果项目使用了babel.config.js文件作为Babel的配置文件，可以确保@babel/preset-env已经正确配置了。需要确保将"modules": false配置为true，以确保Babel不会将import转换为CommonJS模块语法，而保留原始的ES模块语法： ```javascript module.exports = { presets: [ ['@babel/preset-env', { modules: false }] ] }; ``` 以上是几种解决vue动态使用import路由懒加载报错的方法，可以根据具体情况选择适合的方式来解决报错。 ### 回答3： 在使用Vue动态懒加载路由时，如果出现报错，可能是由于以下原因： 1. 路径错误：首先要检查动态导入的相对路径是否正确。在使用`import()`函数时，要确保指定的路径是相对于当前文件的路径。 2. 文件命名错误：Vue路由的懒加载是根据文件的命名约定来识别动态组件的，所以要确保动态组件的文件名符合约定。一般来说，文件名应该以大驼峰或者小驼峰命名，并且应该以`.vue`为后缀。 3. 缺少babel插件：在使用import语法进行动态导入时，需要确保项目已经配置了相应的babel插件，例如`@babel/plugin-syntax-dynamic-import`。可以通过在项目根目录下的`.babelrc`文件中添加配置来解决此问题。 4. webpack配置问题：如果你使用的是Webpack打包工具，并且碰到了报错，可能是Webpack的配置出了问题。可以尝试在Webpack的配置文件中设置`output.chunkFilename`属性，确保动态导入的组件被正确地分割为打包后的chunk文件。 5. 其他可能性：如果以上方法都无法解决问题，可能是由于其他原因导致的报错。可以在浏览器控制台查看详细的错误信息，并尝试通过搜索引擎查找类似问题的解决方案。 总之，在使用Vue动态懒加载路由时，要仔细检查路径、文件命名、babel插件和Webpack配置等方面，以确保懒加载路由的正常使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值