Vue-cli3及以上版本引入本地json数据报404 解决方案

最新推荐文章于 2023-04-19 11:03:02 发布
最新推荐文章于 2023-04-19 11:03:02 发布
阅读量771 收藏 1
点赞数
文章标签： vue bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46313540/article/details/107014574
版权

首先，我们要明确自己现在正在用的Vue-cli是什么版本，因为这可能是导致你引用本地数据报404的原因。

Vue-cli2和Vue-cli3有很多区别，其中一个是：Vue-cli2中静态文件夹是static，而在Vue-cli3中静态文件夹变成了public，没有static

在Vue-cli2中，我们把一些静态文件放到static文件夹下，而在Vue-cli3中，我们必须把静态文件放到public文件夹下，不需要再次新建static文件

至此，你可以看下你的json数据是否有放错位置。
我们直接在public文件目录引入json数据
在这里插入图片描述
然后在页面调用该json数据在这里插入图片描述
在控制台查看，已拿到数据在这里插入图片描述

九零七
关注
详解vue-cli3 中跨域解决方案
12-01
在开发过程中，尤其是在前后端分离的项目中，前端与后端通常部署在不同的服务器上，导致在本地开发时会遇到跨域...总的来说，Vue CLI 3 的跨域解决方案为开发者提供了便利，使得在本地开发过程中能够顺利对接后端API。
Vue-cli3.x引入本地json报404 解决方案
米斯特曹
06-16 2555
（近期公司用Vue开发后台管理系统，顺便做一些Vue方面的记录，本人菜鸟一枚 希望大家多多指正；） 众所周知，前端开发中“数据模拟”是很重要的，今天探讨一下关于Vue加载本地json报404错误的解决方案！ Vue-cli3.x中删除了static、 vue.config.js 等，个人感觉cli2.x和cli3.x改动还是特别大的，3.x中加载本地json只需要把json数据放在public文件...
vue3+ts中引入子组件时出现【无法找到 *.vue 声明文件】
stay hungry, stay foolish
02-22 2146
vue3+ts中引入子组件时出现【无法找到 *.vue 声明文件】
Vue3项目：ts通过import引入传入文件路径报找不到该模块
qq_42506385的博客
10-11 6953
前言 在项目开发中需要通过封装的方法来减小体积，在封装一个异步方法时，传入的路径明明正确却报找不到 浏览器报错： 控制台报错： Critical dependency: the request of a dependency is an expression 我的代码： loader = () => import(path) 解决心路历程 采用引入文件报错后，我尝试使用写死的路径，发现可以正常使用，没有任何问题！！！最后查看文档发现 import只能使用字符串！！ require相同。最后采
关于vue-cli3引用本地json文件报错的问题
shifeifeifei的博客
04-08 631
关于vue-cli3引用本地json文件报错的问题报错信息： 报错信息： GET http://localhost:8080/cities.json 404 (Not Found) createError.js?2d83:16 Uncaught (in promise) Error: Request failed with status code 404 at createError at settle at XMLHttpRequest.handleLoad 这是我用axios请求放在和入口文件同级别下的
解决：vue3使用axios返回json用v-for遍历失效，标签不渲染
qq_38995802的博客
03-25 2235
使用axios获取到result对象之后，取得result.data的对应的json对象，通过foreach遍历然后把每一个对象数组push到自己定义的响应式数组中。不能直接赋值，比如说。axios请求过来的json对象打印为数组，一开始我是用的ref()变为响应式，但是数组应该在定义初始化的时候用reactive。究其本身他v-for本身不渲染，判断是否为空并没有什么意义。第一种就是在v-for外面包一层v-if，判断收到的数据不为空才显示。axios请求在dom渲染之后，但是一顿操作之后还是没有用。
详解项目升级到vue-cli3的正确姿势
12-02
在将项目从旧版本的 Vue CLI 升级到 Vue CLI 3 时，需要遵循一定的步骤以确保顺利过渡。以下是升级过程中可能遇到的关键知识点和解决方案： 1. **创建新项目并迁移源码**： - 首先，创建一个新的 Vue CLI 3 项目，...
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
08-27
在新版Vue-cli模板下，本地开发环境中使用Node服务器跨域是一种常见的解决方案。为了解决浏览器的同源策略限制，本文将为大家介绍一种使用Node服务器跨域的方法。 一、浏览器的同源策略 浏览器有一个核心安全功能...
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
10-16
1. 检查`package.json`文件，确保`@vue/cli-plugin-babel`、`@vue/cli-plugin-typescript` 和 `@vue/cli-service`这三个依赖的版本被锁定为具体的版本号，例如3.10.0。 2. 如果项目中使用了`node-sass`，请将其替换...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
这种解决方案不仅简化了开发流程，也提高了项目的可维护性。 总的来说，理解Webpack如何处理文件路径以及如何配置Webpack的loader选项是解决此类问题的关键。对于Vue CLI项目，熟悉其内部结构，特别是`build`目录下...
VUE项目打包后上传IIS后JSON文件读不出来
qq_38596005的博客
11-27 990
VUE项目打包后上传IIS后JSON文件读不出来 情况如下， 后来发现是我的电脑使用的WIN7系统，IIS可能是版本太低，所以没有JSON的MIME类型，需要手动添加 添加步骤如下 1、如下图在左边选择你要设置的网站，在IIS中选择MIME类型，双击进入。 2、进入后选择搞作中添加，会弹出添加MIME类型对话框，在文件扩展名中输入".json",在MIME类型中输入"text/json”或者“...
踩坑记录：vue引入json文件报路径错误
夏夜追凉丶的博客
10-10 1278
踩坑记录：vue引入json文件报路径错误，但是路径明明没有问题
部署在服务器上的应用请求json文件返回404解决方法及原因分析
热门推荐
大V的博客
11-14 1万+
解决方法最近在做项目的时候，碰到了一个怪事儿，明明json文件放在服务器对的位置，url也查了好几遍，但是每次请求json文件时，却总是返回404找不到文件。
axios请求本地json报错404
weixin_52703987的博客
12-17 4682
1.方法一 使用vue cli老版本创建的vue项目 1.在vue项目根目录下的static目录下创建json文件。例如：data.json 2.在test.vue中获取本地json数据 import axios from 'axios' export default { name: "index", data() { return {}; }, mounted() { this.getData() }, methods
Vue（@vue/cli4.5）打包后本地静态资源图片引用失效，不转base64，vue.config.js配置解决处理办法；
薛定谔的猫的博客
07-09 1702
本地新建vue项目，webpack初始配置的静态资源图片转base64大小的限制是3kb，所以当资源小于当前限制则不会转base64；在项目的vue.config.js文件当中对webpack对静态资源的初始相关配置进行修改，将条件尽可能的设置的小点就可以了； 还有一种办法是在服务端进行一个配置，这样的话就不需要前端进行配置了；两者选其一就可以了；...
【vue cli获取本地json数据总是404报错】
weixin_45460226的博客
05-06 885
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请求本地json文件出现404的问题
Z_ckiy的博客
04-11 1185
尝试过以下两种情况都不行： 1.将json文件放入根目录下的static文件中 2.将json文件放入根目录下的public文件中 最后解决方法： 将json文件放入根目录下的public文件中的js文件中 在引用的时候因为public是向外曝露的服务器路径，但在引用时，不用写“public” 就好了 ...
vue3+vite本地json文件打包与读取时遇到的问题
最新发布
m0_72072486的博客
04-19 1388
若是放在src文件夹下在打包的时候本地json文件打包不进去。推荐把本地json文件放在public文件夹中。本地json数据在vue3中可以直接读取。
vue本地请求json 报错404 解决方法来了
Exhalexujing的博客
11-06 4924
请求本地文件报错404试了几种方法这种成功了 先开始是看见网上说是 要这样不管localhost还是../ 新建一个static文件夹本地json放这个下面目录要和src同级 结果没用照常报错 继续找答案 看见一个网友说可能vuecli3.0生成的项目，静态文件变成了public文件。 最开始请求的static的文件中的json也是报错，就查看了很多的资料最后发现改了 本地请求需要在public文件中新建一个js文件，在js文件中添加json的本地数据文件 照着一做还真的是...
vue-cli-service深度解析：启动关键与核心代码
Vue CLI通过`vue-cli-service`提供了一整套高效、可扩展的项目构建和服务启动解决方案，极大地简化了前端开发的初始化和维护工作，使得开发者可以专注于编写Vue应用本身，而不用过多关心底层构建细节。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值