【VueJS】VueJS开发请求本地json数据的配置
VueJS开发请求本地json数据的配置,旧版本是build/dev-server.js,新版本是build/webpack.dev.conf.js。
VueJS开发请求本地json数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-template中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以配置本地访问在webpack.dev.conf.js里配置即可。
1. 旧版dev-server.js配置本地数据访问:
在const app = express()后,const compiler = webpack(webpackConfig)前配置即可。

2. 新版webpack.dev.conf.js配置本地数据访问:
在const portfinder = require(‘portfinder’)后添加


有的小伙伴配置后说不能访问,所有的修改配置都需要重新启动运行命令的:npm run dev才能生效,还有data.json数据也不能少,就放在根目录下与index.html同级。data.json的部分数据如下所示:

3. 访问本地接口
按照上面的步骤配置后就可以正确访问本地接口了。
http://localhost:8080/api/seller

http://localhost:8080/api/goods

http://localhost:8080/api/ratings

这是我们虽然得到正确的数据了,但是因为数据不是格式化的,看起来有些麻烦,我们可以安装Google的jsonview插件(我用的是Google浏览器),安装成功后即可格式化json数据



【VueJS】VueJS开发请求本地json数据的配置的更多相关文章
- vue开发请求本地模拟数据的配置方法(转)
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- 手把手教你vue配置请求本地json数据
本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require ...
- vue配置 请求本地json数据
第一步:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 //第一步const expres ...
- ajax和axios请求本地json数据对比
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...
- vue请求本地json数据
1.下载vue-resource插件 cnpm install vue-resource 1.2全局引入vue-resource: 在main.js import VueResource from ' ...
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- iOS开发网络篇—JSON数据的解析
iOS开发网络篇—JSON数据的解析 iOS开发网络篇—JSON介绍 一.什么是JSON JSON是一种轻量级的数据格式,一般用于数据交互 服务器返回给客户端的数据,一般都是JSON格式或者XML格式 ...
- C#的百度地图开发(二)转换JSON数据为相应的类
原文:C#的百度地图开发(二)转换JSON数据为相应的类 在<C#的百度地图开发(一)发起HTTP请求>一文中我们向百度提供的API的URL发起请求,并得到了返回的结果,结果是一串JSON ...
- PHP/Post 提交请求获取json数据,并转化为所需要的数组
/** * Post 提交请求获取json数据,并转化为所需要的数组 */ function request_post($url = '', $param = '') { if (empty($url ...
随机推荐
- Java截取最后一个 _ 后面的所有字符
String file = http://localhost:8888/upload/20190310/115111_58_592_HDFS读取文件的流程.png //截取文件名 String ori ...
- python的writelines读空行
在文件中,如果遇到一个空白行,readline()并不会返回一个空串,因为每一行的末尾还有一个或多个分隔符,因此“空白行”至少会有一个换行符或者系统使用的其他符号.只有当真的读到文件末尾时,才会读到空 ...
- css(4)
类选择器和id选择器都有父子选择器. 在css文件中国,有时候为了简化样式,可以把相同的样式拿出来放在一起. display:inline display:block 行内元素里只能放行内元素,而块内 ...
- laravel基础课程---4、Laravel基础网站结构搭建
laravel基础课程---4.Laravel基础网站结构搭建 一.总结 一句话总结: 1.搭建网站前后台路由:在路由组Route::group()中设置好命名空间和前缀 2.搭建控制器:比如1)新建 ...
- 分享知识-快乐自己:SpringMvc后台Date对象数据 到 前台页面的显示转换
常常为日期格式的转换而烦恼吗?那么就试试看看楼主的方式吧!让你摆脱烦恼,从而快乐撸码. 如果你只用作于一个日期的显示采用方式如下: 导入:相应的类库 <%@ taglib uri="h ...
- python-多线程3-生产者消费者
'''生产者和消费者''' ''' 用python写一个多线程的生产者和消费者 生产者x x>0,有东西,print(不生产) x=0,没东西,print(生产) for循环 消费者x x=0, ...
- MCI支持的格式在注册表中的位置
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion
- CodeForces - 1005E2:Median on Segments (General Case Edition) (函数的思想)
You are given an integer sequence a1,a2,…,ana1,a2,…,an. Find the number of pairs of indices (l,r)(l, ...
- kubectl工具管理应用生命周期
######kubectl管理工具###### [root@k8s-master dashboard]# kubectl get pod NAME READY STATUS RESTARTS AGE ...
- vim 模式下的几个快捷用法
1.ctrl + v (-- VISUAL BLOCK --) 选中块模式,y 复制,d 剪切,p 粘贴,Esc退出模式 2.Shift + v (-- VISUAL LINE -- ) 快速行选 ...