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 相关文章推荐
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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中使用正则表达式进行查找替换
2013/06/13 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
搭建vue开发环境
2018/07/19 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
GOJS+VUE实现流程图效果
2018/12/01 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
python网络编程之数据传输UDP实例分析
2015/05/20 Python
python实现二维插值的三维显示
2018/12/17 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
nohup的用法
2014/08/10 面试题
JPA的优势都有哪些
2013/07/04 面试题
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
先进集体事迹材料
2014/02/17 职场文书
车贷收入证明范本
2014/09/14 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
2015年采购工作总结
2015/04/10 职场文书
检察院起诉意见书
2015/05/20 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
中秋晚会致辞
2015/07/31 职场文书
JavaScript实现音乐播放器
2022/08/14 Javascript