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数据的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue-cli项目中使用Mockjs详解

    vue-cli项目中使用Mockjs详解

    背景 前端在早期jQuery时代时,前端功能和后端工程基本上都是合在一起,典型的就是常见的maven工程下面的webapp目录包含前端各类静态资源文件. 这个时候,我们总是会遇到这些问题: 老大,接口文档还没输出,我的好多活干不下去啊! 后端小哥,接口写好了没,我要测试啊! 测试时间不够啊,就要发版了,今天难道我有看明天的太阳升起? 诸如种种,就是一句话:劳资,再也不要指望你们了! node出现之后,准确的说是前后端分离之后,前端迫切需要一种机制,不在需要依赖后端接口开发.经过这几年的发展,有好

  • 详解vue-cli项目中用json-sever搭建mock服务器

    详解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(请求数据删除数据)

    详解在vue-cli项目中使用mockjs(请求数据删除数据)

    在我们的生产实际中,后端的接口往往是较晚才会出来,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的.于是今天我们来介绍一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作,在后台数据完成之后,你所做的只是去掉mockjs:停止拦截真实的ajax,仅此而已. 搭建一个vue项目 # 全局安装 vue-cli $ npm install --global vue-

  • 详解vue-cli 本地开发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数据

    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项目中怎么使用mock数据

    详解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的build的文件夹下没有dev-server.js文件配置mock数据的方法

    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的方法

    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

随机推荐