首先明确一点,在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文件的更多相关文章

  1. vue cli3 创建的项目中eslint 配置 问题的解决

    1--   vue cli3 项目文件结构 2-- 注释问题 在eslintrc.js 文件中,将 '@vue/standard' 注释后重启即可: 3-- 配置 eslint 文件 在 vue-cl ...

  2. 如何在vue中请求本地json文件

    1..修改webpack.base.conf.js 文件中添加'/static': resolve('static'),如下所示,此时存放于static的json文件就可以通过/static/xxx. ...

  3. vue使用axios请求本地json文件出现404

    之前的路径是这么写的,一直出现404,后来发现必须是http的才可以,这样是无法请求的 把路径改为以下   位置根据json文件决定,但是必须是http://localhost:断口号

  4. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  5. vue-cli项目 build后请求本地static文件中的 json数据,路径不对,报错404处理方法

    vue-cli 项目 build  出错点: 1,build生成dist 放在tomcat上 报错,不显示内容  解决办法: config>index.js===>assetsPublic ...

  6. vue 模拟后台数据(加载本地json文件)调试

    首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages" ...

  7. 手把手教你vue配置请求本地json数据

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require ...

  8. vue配置 请求本地json数据

    第一步:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 //第一步const expres ...

  9. SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析

    SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...

随机推荐

  1. (转)【mysql元数据库】使用information_schema.tables查询数据库和数据表信息 ---数据记录大小统计

    转:https://www.cnblogs.com/ssslinppp/p/6178636.html https://segmentfault.com/q/1010000007268994?_ea=1 ...

  2. git错误处理

    1.今天 当我  执行  git add  somefile 的时候,出现 如下 错误: If no other git process is currently running, this prob ...

  3. 535D Tavas and Malekas

    题目大意 给你一个串和m个下标 问你一个长度为n的串每一个下标开始的后缀的前缀都包含给定的串的方案数 分析 对于给定的串求出z数组 对于两个串不重叠的情况就是中间都不包含的数随便填即可 对于重叠的情况 ...

  4. 测开之路七十二:性能测试工具之locust简介

    locust官网:https://locust.io/ locust安装(不支持python3.7):pip install locustio   或者pycharm安装 官网给出的样例 根据官网代码 ...

  5. 【ABAP系列】SAP ABAP模块-取整操作中CEIL和FLOOR用法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP模块-取整操作中 ...

  6. PTA 1155 Heap Paths (DFS)

    题目链接:1155 Heap Paths (30 分) In computer science, a heap is a specialized tree-based data structure t ...

  7. 网络流强化-HDU4280

    数组没开够居然显示TLE而不是RE,自己觉得好的优化的方法没什么用…… //http://www.renfei.org/blog/isap.html 带解释的 //https://www.cnblog ...

  8. 编程语言-Ruby-问题整理

    安装 https://github.com/oneclick/rubyinstaller2/releases/tag/RubyInstaller-2.6.0-1

  9. [LeetCode] 477. Total Hamming Distance(位操作)

    传送门 Description The Hamming distance between two integers is the number of positions at which the co ...

  10. 《JAVA设计模式》之备忘录模式(Memento)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述备忘录(Memento)模式的: 备忘录模式又叫做快照模式(Snapshot Pattern)或Token模式,是对象的行为模式. 备忘录 ...