vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
由于最新版本的vue-cli已经放弃dev-server.js
,需在webpack.dev.conf.js
配置才行
新版本的webpack.dev.conf.js配置如下:
const express require('express') const app =express() var appData = require('..data.json') var seller = appData.seller var goods = appData.goods var ratings = appData.ratings var apiRoutes = express.Router() app.use('/api', apiRoutes)
找到devServer后,在最后面添加:
before(app) { app.get('/api/appData',function(req,res){ res.json({ errno:0, data:appData }) }), app.get('/api/seller',function(req,res){ res.json({ errno:0, data:seller }) }), app.get('/api/goods',function(req,res){ res.json({ errno:0, data:goods }) }), app.get('/api/ratings',function(req,res){ res.json({ errno:0, data:ratings }) }) }
最后一定要重启才会生效,因为修改了配置文件,重新跑一次npm run dev.
打开路径 http://localhost :8080/api/appData就能请求到数据
打开 http://localhost :8080/api/seller 能请求到seller相关数据
如图:
总结
以上所述是小编给大家介绍的vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关推荐
-
详解vue-cli 本地开发mock数据使用方法
vue-cli 中可以通过配置 proxyTable 解决开发环境的跨域问题,具体可以参考这篇文章:Vue-cli proxyTable 解决开发环境的跨域问题 如果后端接口尚未开发完成,前端开发一般使用mock数据. mock方法有多种多样,这里给出两种: 方法一: 使用express搭建静态服务 mock数据写在json文件中,proxyTable 里将接口代理到具体mock数据json文件上. 具体方法: 创建 mock 文件夹 build/dev-server.js 中添加如下代码 np
-
详解vue-cli项目中怎么使用mock数据
前言 注意:网上很多教程说需要在build目录下的dev-server.js文件中配置,但目前最新的vue-cli是没有dev-server.js这个文件的,因为已经被合并到webpack.dev.conf.js文件中,所以直接在该文件中配置即可 步骤 1.在根目录新建一个mock文件夹用于存在所有用于数据测试的.json文件 dir.png posts.json { "code": 200, "data": [ { "id": 0, "
-
详解vue-cli项目中用json-sever搭建mock服务器
vue-cli下配置json-server 使用json-server实现后台数据接口 先建一个json文件:db.json 放在build/下 在build/dev-server.js中配置 (注意变量命名) github说明: 启动项目 地址栏输入 localhost:8081 服务已启动成功 8081后加相应后缀即可访问数据 localhost:8081/posts l localhost:8081/comments 最后做一下浏览器代理 设置config/index.jsr如下 最后验证
-
详解在vue-cli项目中使用mockjs(请求数据删除数据)
在我们的生产实际中,后端的接口往往是较晚才会出来,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的.于是今天我们来介绍一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作,在后台数据完成之后,你所做的只是去掉mockjs:停止拦截真实的ajax,仅此而已. 搭建一个vue项目 # 全局安装 vue-cli $ npm install --global vue-
-
vue-cli项目中使用Mockjs详解
背景 前端在早期jQuery时代时,前端功能和后端工程基本上都是合在一起,典型的就是常见的maven工程下面的webapp目录包含前端各类静态资源文件. 这个时候,我们总是会遇到这些问题: 老大,接口文档还没输出,我的好多活干不下去啊! 后端小哥,接口写好了没,我要测试啊! 测试时间不够啊,就要发版了,今天难道我有看明天的太阳升起? 诸如种种,就是一句话:劳资,再也不要指望你们了! node出现之后,准确的说是前后端分离之后,前端迫切需要一种机制,不在需要依赖后端接口开发.经过这几年的发展,有好
-
vue-cli项目中怎么使用mock数据
在vue项目中, mock数据可以使用 node 的 express模块搭建服务 1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下更改 var appData = require('../test/data.json') // 获取数据 var apiRoutes = express.Router(); //get请求 apiRoutes.get
-
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
由于最新版本的vue-cli已经放弃dev-server.js,需在webpack.dev.conf.js配置才行 新版本的webpack.dev.conf.js配置如下: const express require('express') const app =express() var appData = require('..data.json') var seller = appData.seller var goods = appData.goods var ratings = appD
-
python高效过滤出文件夹下指定文件名结尾的文件实例
如下所示: import os def anyTrue(predicate, sequence): return True in map(predicate, sequence) def filterFiles(folder, exts): for fileName in os.listdir(folder): if os.path.isdir(folder + '/' + fileName): filterFiles(folder + '/' + fileName, exts) elif an
-
java实现输出文件夹下某个格式的所有文件实例代码
package file; import java.io.File; /** * 输出某个文件夹下所有某个格式的文件 * @author hasee * */ public class Demo2 { public static void main(String[] args) { getTxtName("d:/a",".jpg"); } public static void getTxtName(String path,String suffix) { //判断文
-
Matlab实现获取文件夹下所有指定后缀的文件
目录 1. 要求 2. 代码 3. 参考 1. 要求 获取指定文件夹下(包含子文件夹),所有指定后缀(如txt)的文件路径(即文件所在目录+文件名),返回一个字符串数组. 2. 代码 获取C:/Users/Administrator/Desktop文件夹下(包含子文件夹)的所有.m文件 clear dirOutput = dir('C:/Users/Administrator/Desktop/**/*.m'); folder = string({dirOutput.folder}'); file
-
bat自动删除指定文件夹下前几天的文件的代码
复制代码 代码如下: @echo off set d=%date:~0,10% mshta vbscript:createobject("scripting.filesystemobject").opentextfile("wind.txt",2,true).writeline(dateadd("d",-2,"%d%"))(window.close) for /f %%m in (wind.txt) do (set tt=%%
-
PowerShell统计文件夹下文件个数的方法
计算一个文件夹下面的文件个数是一件很容易的事情,但看到这篇文章之前,还从来没有想过计算一下文件个数还有这么多学问在里头. 我们这里有两种方法来计算文件夹下的文件个数,下面分别展示详细的代码来计算windows目录下的文件个数. 1.使用Get-ChildItem来得到所有的子文件夹和文件,然后再选取出所有的文件,再使用Measure-Object,最后再从Measure-Object的结果中使用Select-Object的ExpandProperty参数来计算出个数.听起来就有点复杂,下面看看代
-
Java实现的模糊匹配某文件夹下的文件并删除功能示例
本文实例讲述了Java实现的模糊匹配某文件夹下的文件并删除功能.分享给大家供大家参考,具体如下: package com.wyebd.gis; import java.io.File; /** * @Title: DelFiles.java * @Package com.wyebd.gis * @Description: * @author lisr * @date Mar 7, 2012 5:36:03 PM * @version V1.0 */ public class DelFiles {
-
如何配置vue.config.js 处理static文件夹下的静态文件
最近开发过程中遇到个小需求,需要根据需求动态配置一些静态数据,但我不想直接把这个静态文件引入进来,build时就会把数据打包到js文件中,造成js文件很大:呃呃....(ps:就想给自己找点别扭) 回头看一下项目,果断的在根目录下创建一个static/test.json文件,在目标页面下fetch获取这个json文件里的数据: fetch("../static/test.json") .then(res => res.json()) .then(res => { //获取到
-
Android 在 res/layout 文件夹 下创建一个 子文件夹实例
Android 资源文件夹 Layout 文件夹 Layout 文件是存放Android的布局文件的资源文件夹,但是如果你想要在里面创建子文件夹,你会发现xml文件报错. 如何在Layout文件夹下方创建Layout的子文件夹. 这边我们需要著一个一个点就是我们的Layout 文件夹是属于资源文件将,如果你直接创建文件夹Android 会无法识别你这个是资源文件夹,所以你需要让文件夹确定为资源文件夹. 如何设置文件夹为资源文件夹 我们将Android Studio 视图模式切换为Project
-
IDEA将Maven项目中指定文件夹下的xml等文件编译进classes的方法
出处:https://www.cnblogs.com/SunSpring eclipse下面创建的Maven项目,使用mybatis.eclipse里面能正常启动,在idea中一直卡在maybatis 加载位置. 1.首先是不报错也没反应.这个时候需要我们重写SqlSessionFactoryBean 让错误显示出来. public class BeanFactory extends SqlSessionFactoryBean { @Override protected SqlSessionFa
随机推荐
- MySQL与Oracle 差异比较之四条件循环语句
- jQuery使用ajax_动力节点Java学院整理
- Jquery easyui 实现动态树
- Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
- 使用Reachability类判断iOS设备的当前网络连接类型
- ES6新特性二:Iterator(遍历器)和for-of循环详解
- BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
- JavaScript 拾碎[三] 使用className属性
- 移动端效果之Swiper详解
- 图文详解phpstorm配置Xdebug进行调试PHP教程
- Linux下MySql 1036 错误码解决(1036: Table 'xxxx' is read only)
- PHP模块memcached使用指南
- JSON 数字排序多字段排序介绍
- shell脚本编程之for语句、if语句使用介绍
- css 兼容性问题this.style.cursor=''hand''
- python装饰器使用方法实例
- CheckBoxList多选样式jquery、C#获取选择项
- 关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
- Windows 2000的系统,防止木马写入指定目录
- Symfony2创建基于域名的路由相关示例