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 相关文章推荐
js停止输出代码
Jul 20 Javascript
JavaScript 继承的实现
Jul 09 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
php实现微信支付之企业付款
2018/05/30 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
24式加速你的Python(小结)
2019/06/13 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
满月酒邀请函
2015/01/30 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang
Pandas数据类型之category的用法
2021/06/28 Python
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js