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 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
javascript 获取图片颜色
Apr 05 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
canvas实现贪食蛇的实践
Feb 15 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
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP可变函数学习小结
2015/11/29 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
PHP时间处理类操作示例
2018/09/05 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
运动会方队口号
2014/06/07 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
纪委立案决定书
2015/06/24 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL