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 相关文章推荐
JQquery的一些使用心得分享
Aug 01 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 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实现简单爬虫的方法
2015/07/29 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
JavaScript版代码高亮
2006/06/26 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
JQuery小知识
2010/10/15 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
python圣诞树编写实例详解
2020/02/13 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
《口技》教学反思
2014/02/21 职场文书
《白鹅》教学反思
2014/04/13 职场文书
2015年测量员工作总结
2015/05/23 职场文书
网络妈妈观后感
2015/06/08 职场文书
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python