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数据的配置的更多相关文章

  1. vue开发请求本地模拟数据的配置方法(转)

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  2. 手把手教你vue配置请求本地json数据

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require ...

  3. vue配置 请求本地json数据

    第一步:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 //第一步const expres ...

  4. ajax和axios请求本地json数据对比

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...

  5. vue请求本地json数据

    1.下载vue-resource插件 cnpm install vue-resource 1.2全局引入vue-resource: 在main.js import VueResource from ' ...

  6. VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  7. iOS开发网络篇—JSON数据的解析

    iOS开发网络篇—JSON数据的解析 iOS开发网络篇—JSON介绍 一.什么是JSON JSON是一种轻量级的数据格式,一般用于数据交互 服务器返回给客户端的数据,一般都是JSON格式或者XML格式 ...

  8. C#的百度地图开发(二)转换JSON数据为相应的类

    原文:C#的百度地图开发(二)转换JSON数据为相应的类 在<C#的百度地图开发(一)发起HTTP请求>一文中我们向百度提供的API的URL发起请求,并得到了返回的结果,结果是一串JSON ...

  9. PHP/Post 提交请求获取json数据,并转化为所需要的数组

    /** * Post 提交请求获取json数据,并转化为所需要的数组 */ function request_post($url = '', $param = '') { if (empty($url ...

随机推荐

  1. importlib模块 反射字符串的对象

    通过 importlib模块 反射字符串的对象 Python 3.5.2 (default, Nov 17 2016, 17:05:23) [GCC 5.4.0 20160609] on linux ...

  2. C++ 结构体多元素sort排序调用时的写法

    //总结一下,结构体数据排序的快速写法 //以后在遇到需要写的时候,不要迟疑快速写完 struct node { int u, v, w; }a[10000]; //假设该结构体有3个元素 //现在仅 ...

  3. js中的window.open返回object的错误

    系统中用javascript中的window.open后,页面返回了一个[object].因为系统的原因,必需使用href="javascript:window.open()"这样 ...

  4. laravel 在apache或nginx的配置

    laravel 下载后,如何运行起来呢,根据自己的应用,记录了几个关键点: 1.apache 配置: 打开http.conf文件,将mod_rewrite前面的#去掉(启用重写模块): 2.nginx ...

  5. codeforces 703D D. Mishka and Interesting sum(树状数组)

    题目链接: D. Mishka and Interesting sum time limit per test 3.5 seconds memory limit per test 256 megaby ...

  6. 基类的两个派生类再派生一个派生类 用virtual避免二义性

    class vehicle{ int MaxSpeed; int Weight;public: vehicle(int maxspeed, int weight) :MaxSpeed(maxspeed ...

  7. APIO2018爆零记

    Day1 集合 7点和yyc他们在学校简单的集合了一下 在大通道看到了整个年级来上操 嘲讽了一番就大摇大摆的走出了校门 校门口看无迟到周的权益部长lzj同学满眼的羡慕 2333 然后到了裕龙酒店登记入 ...

  8. Qt之log数据展示模块简要实现

    Log模块主要用于实时测井数据的显示和测后曲线数据的预览和打印,为更好的展示对Qt中相关知识点的应用,特以Log模块为例对其进行简要实现. 内容导图: 一.功能需求 1.界面效果图 Log模块实现曲线 ...

  9. 【运维程序】简单的命令控制器(支持定时命令执行、重复定时任务命令和进程管理,开发这个小程序主要是为了方便管理服务进程)【个人github项目】

    一.前言: command-controller 一个运维程序,简单的命令控制器(支持定时命令执行和重复定时命令,开发这个程序主要是为了方便管理服务进程) 本来是要用python做的,但是之前做ffm ...

  10. BZOJ1503:[NOI2004]郁闷的出纳员

    浅谈\(splay\):https://www.cnblogs.com/AKMer/p/9979592.html 浅谈\(fhq\)_\(treap\):https://www.cnblogs.com ...