Vue-cli项目获取本地json文件数据的实例


Posted in Javascript onMarch 07, 2018

在自己做的vue demo项目中,我想通过在本地添加一些json数据,写到json文件中,并且通过异步请求获取到,然后加载数据。

axios.get('http://localhost:8080/datas/json')

然而在这一过程中,我的访问总是404.通过查阅,我发现,在vue-cli基础上构建的项目中,只有static目录才是vue-cli向外暴露的静态数据文件夹,我放在static下的图片可以正常访问到,我是在static同级目录新建了datas目录,将json文件放入datas目录,请求总是404,当我将json文件放到static目录下后,就可以正常访问了。

这一特性一定要记住:

static目录是vue-cli向外暴露的静态文件夹,所有静态数据都应该放到static目录中!!

以上这篇Vue-cli项目获取本地json文件数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 Javascript
在vue项目中,使用axios跨域处理
Mar 07 #Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 #Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 #Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 #Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 #Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 #Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 #Javascript
You might like
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
详解vue v-model
2020/08/31 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
Python如何使用input函数获取输入
2020/08/06 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
企事业单位求职者的自我评价
2013/12/28 职场文书
司法建议书范文
2014/05/13 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
python代码实现备忘录案例讲解
2021/07/26 Python
Ruby处理YAML和json数据
2022/04/18 Ruby