https://blog.csdn.net/qq_34645412/article/details/78833860

https://blog.csdn.net/qq_34645412/article/details/78833860

参照了别人写的记录一下

最新的vue里dev-server.js被替换成了webpack-dev-conf.js

在模拟后台数据的时候直接在webpack-dev-conf.js文件中修改

第一步,在const portfinder = require(‘portfinder’)后添加

//第一步
const express = require('express')
const app = express()//请求server
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()方法

devServer: {
clientLogLevel: 'warning',
historyApiFallback: true,
hot: true,
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
},
//第二步找到devServer,在里面添加
before(app) {
app.get('/api/seller', (req, res) => {
res.json({
errno: 0,
data: seller
})//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
}),
app.get('/api/goods', (req, res) => {
res.json({
errno: 0,
data: goods
})
}),
app.get('/api/ratings', (req, res) => {
res.json({
errno: 0,
data: ratings
})
})
}
}

  提供一个json.data数据

{
"seller": {
"name": "粥品香坊(回龙观)",
"description": "蜂鸟专送",
"deliveryTime": 38,
"score": 4.2,
"serviceScore": 4.1,
"foodScore": 4.3,
"rankRate": 69.2,
"minPrice": 20,
"deliveryPrice": 4,
"ratingCount": 24,
"sellCount": 90,
"bulletin": "粥品香坊其烹饪粥料的秘方源于中国千年古法,在融和现代制作工艺,由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐,发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。",
"supports": [
{
"type": 0,
"description": "在线支付满28减5"
},
{
"type": 1,
"description": "VC无限橙果汁全场8折"
},
{
"type": 2,
"description": "单人精彩套餐"
},
{
"type": 3,
"description": "该商家支持发票,请下单写好发票抬头"
},
{
"type": 4,
"description": "已加入“外卖保”计划,食品安全保障"
}
],
"avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg",
"pics": [
"http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180",
"http://fuss10.elemecdn.com/b/6c/75bd250e5ba69868f3b1178afbda3jpeg.jpeg?imageView2/1/w/180/h/180",
"http://fuss10.elemecdn.com/f/96/3d608c5811bc2d902fc9ab9a5baa7jpeg.jpeg?imageView2/1/w/180/h/180",
"http://fuss10.elemecdn.com/6/ad/779f8620ff49f701cd4c58f6448b6jpeg.jpeg?imageView2/1/w/180/h/180"
],
"infos": [
"该商家支持发票,请下单写好发票抬头",
"品类:其他菜系,包子粥店",
"北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340",
"营业时间:10:00-20:30"
]
}}

  

最新的vue没有dev-server.js文件,如何进行后台数据模拟?的更多相关文章

  1. 解决新版本webpack vue-cli生成文件没有dev.server.js问题

    新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...

  2. vue-cli 2.92版本 没有dev.server.js

    在webpack.dev.conf.js 文件中 //首先 const express = require('express') const app = express() var appData = ...

  3. Vue在单独引入js文件中使用ElementUI的组件

    Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...

  4. 在被vue组件引用的 js 文件里获取组件实例this

    思路: 通过调用函数 把 组件实例this  传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConf ...

  5. vue页面引入外部js文件遇到的问题

    问题一:vue文件中引入外部js文件的方法 //在vue文件中 <script> import * as funApi from '../../../publicJavaScript/pu ...

  6. Vue 加载外部js文件

    Vue.js  加载外部js文件 在项目内新建一个config.js //变量的定义 export var config = { baseurl:'http://172.16.114.5:8088/M ...

  7. vue引入第三方的js文件

    在最近开发中,遇到了vue框架配合openlayers做gis功能的一个模块.过程中要求引用第三方的单独js文件.嗯,解决如下: 把整体js文件用函数abc()封装起来,在需要用到的模块用var ob ...

  8. vue如何导入外部js文件(es6)

    也许大家都是使用习惯了es5的写法喜欢直接用<Script>标签倒入js文件,但是很是可惜,这写法.在es6,或则说vue环境下不支持 真的写法是怎样? 首先.我们要改造我们要映入的外部j ...

  9. vue中配置axios.js文件,发送请求

    为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...

  10. Vue中引入静态JS文件(爬坑)

    前言(背景介绍) 开发的项目需要与Threejs的3D项目结合在一起,需要静态引入,jquery.js,stats.js,three.js,ThreeBSP.js等静态文件.开发环境是iview-ad ...

随机推荐

  1. C#中[WebMethod]的用法,aspx、ashx、asmx

    在.net 3.5的情况下 前台JQuery做Ajax的时候,服务器端 (1)可以调用aspx.cs 中声明带有[WebMehtod]的public static 的方法(不需要自己手动添加web.c ...

  2. tf训练OTSU

    训练一个简单的回归网络 基础的函数如下: # coding=utf-8 import tensorflow as tf import numpy as np np.random.seed(0) # 卷 ...

  3. 【iCore4 双核心板_uC/OS-II】例程六:信号量——任务同步

    一.实验说明: 信号量是一个多任务内核提出的一个协议机构,上一个实验中我们介绍了信号量访问共享资源 的功能,其实信号量最初是用来控制访问共享资源的,它还可以用来同步一个中断服务函数和一个任 务,或者同 ...

  4. win2003远程桌面怎么切换到多用户?

    怎么用远程桌面切换server2003的多用户的问题?server2003操作系统的远程桌面是多用户的,就是你的机子远程桌面到服务器而其它机子也可以远程桌面,所以往往有时候你看不到原始的桌面的样子,所 ...

  5. WebViewJavascriptBridge的使用说明

    WebViewJavascriptBridge 项目介绍 在Obj-C 和 WKWebView, UIWebView 中的 Javascript之间传送信息的桥梁. 项目地址 如何使用 Javascr ...

  6. 解决importerror no module named mysqldb

    在window中 1:在Scripts文件夹下会出现一系列和pip有关的文件,DOS中到Scripts,运行:pip install mysql-python 2:报错:Microsoft Visua ...

  7. phpstorm 破解

    http://idea.lanyus.com/ https://www.imsxm.com/jetbrains-license-server.html [  http://www.activejetb ...

  8. 《Spring实战》学习笔记-第五章:构建Spring web应用

    之前一直在看<Spring实战>第三版,看到第五章时发现很多东西已经过时被废弃了,于是现在开始读<Spring实战>第四版了,章节安排与之前不同了,里面应用的应该是最新的技术. ...

  9. 在VS中为C/C++源代码文件生成对应的汇编代码文件(.asm)

    以VS2017为例 然后重新生成工程,在工程目录中就会有对应的汇编代码文件.

  10. python基础类型—元祖

    元组  被称为只读列表,即数据可以被查询,但不能被修改,所以,字符串的切片操作同样适用于元组. 例:(1,2,3)("a","b","c") ...