vue cli3以上的项目中如何使用axois请求本地json文件
首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public

我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求的时候总是报错404


这个路径看似没毛病啊,于是我就搜资料
发现在vue cli3中静态资源是需要放在public中的,我改动后再次请求,还是报错


这种问题让人很纳闷,后来我尝试把public删了,直接 这样/json/data-china.json来访问

结果请求成功了

是什么原因呢???
原来是在vue cli3以上的版本中,你只要把那个你想请求的文件跟在localhost:8080后面,vue会自动去public文件夹下面找这个文件
看似简单的一个请求数据,花费了我一早上的时间,总算填坑了,下面这篇链接文章可以帮助我们更好的优化这个功能
https://blog.csdn.net/huangguangyourena/article/details/93186544
vue cli3以上的项目中如何使用axois请求本地json文件的更多相关文章
- vue cli3 创建的项目中eslint 配置 问题的解决
1-- vue cli3 项目文件结构 2-- 注释问题 在eslintrc.js 文件中,将 '@vue/standard' 注释后重启即可: 3-- 配置 eslint 文件 在 vue-cl ...
- 如何在vue中请求本地json文件
1..修改webpack.base.conf.js 文件中添加'/static': resolve('static'),如下所示,此时存放于static的json文件就可以通过/static/xxx. ...
- vue使用axios请求本地json文件出现404
之前的路径是这么写的,一直出现404,后来发现必须是http的才可以,这样是无法请求的 把路径改为以下 位置根据json文件决定,但是必须是http://localhost:断口号
- 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- vue-cli项目 build后请求本地static文件中的 json数据,路径不对,报错404处理方法
vue-cli 项目 build 出错点: 1,build生成dist 放在tomcat上 报错,不显示内容 解决办法: config>index.js===>assetsPublic ...
- vue 模拟后台数据(加载本地json文件)调试
首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages" ...
- 手把手教你vue配置请求本地json数据
本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require ...
- vue配置 请求本地json数据
第一步:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 //第一步const expres ...
- SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析
SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...
随机推荐
- (转)【mysql元数据库】使用information_schema.tables查询数据库和数据表信息 ---数据记录大小统计
转:https://www.cnblogs.com/ssslinppp/p/6178636.html https://segmentfault.com/q/1010000007268994?_ea=1 ...
- git错误处理
1.今天 当我 执行 git add somefile 的时候,出现 如下 错误: If no other git process is currently running, this prob ...
- 535D Tavas and Malekas
题目大意 给你一个串和m个下标 问你一个长度为n的串每一个下标开始的后缀的前缀都包含给定的串的方案数 分析 对于给定的串求出z数组 对于两个串不重叠的情况就是中间都不包含的数随便填即可 对于重叠的情况 ...
- 测开之路七十二:性能测试工具之locust简介
locust官网:https://locust.io/ locust安装(不支持python3.7):pip install locustio 或者pycharm安装 官网给出的样例 根据官网代码 ...
- 【ABAP系列】SAP ABAP模块-取整操作中CEIL和FLOOR用法
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP模块-取整操作中 ...
- PTA 1155 Heap Paths (DFS)
题目链接:1155 Heap Paths (30 分) In computer science, a heap is a specialized tree-based data structure t ...
- 网络流强化-HDU4280
数组没开够居然显示TLE而不是RE,自己觉得好的优化的方法没什么用…… //http://www.renfei.org/blog/isap.html 带解释的 //https://www.cnblog ...
- 编程语言-Ruby-问题整理
安装 https://github.com/oneclick/rubyinstaller2/releases/tag/RubyInstaller-2.6.0-1
- [LeetCode] 477. Total Hamming Distance(位操作)
传送门 Description The Hamming distance between two integers is the number of positions at which the co ...
- 《JAVA设计模式》之备忘录模式(Memento)
在阎宏博士的<JAVA与模式>一书中开头是这样描述备忘录(Memento)模式的: 备忘录模式又叫做快照模式(Snapshot Pattern)或Token模式,是对象的行为模式. 备忘录 ...