vue-cli项目配置mock数据(新版本)
最新的vue-webpack-template 中已经去掉了dev-server.js 但是要进行模拟后台数据的,如何模拟本地数据操作?
解决方法:
dev-server.js 改用webpack-dev-conf.js代替。
新版webpack.dev.conf.js配置如下:
在const portfinder = require(‘portfinder’)后面添加
const express = require('express')
const app = express()
var goodsData = require('../mock/goods.json')//加载本地数据文件
var apiRoutes = express.Router()
app.use('/goods', apiRoutes)
//然后找到devServer,在里面添加
before(app) {
app.get('/api/goodsData', (req, res) => {
res.json({
errno: 0,
data: goodsData
})//接口返回json数据,上面配置的数据goodsData就赋值给data请求后调用
})
}
然后npm run dev,一定要重启 一下就可以http://localhost:8080/XXX 访问了
截图如下



vue-cli项目配置mock数据(新版本)的更多相关文章
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- VUE前端项目配置代理解决跨域问题
VUE前端项目配置代理解决跨域问题 问题如下,经常在本地调试接口出现这种问题 解决方式1:Chrome 的扩展插件 以前使用Chrome 的扩展插件,但是有时候还是会出现莫名其妙的问题. 需要梯子才行 ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- vue项目配置Mock.js
扯在前面 最近一直在忙跳槽的事情,博客也好久没有更新了,上次更新还是去年,不出意外的话,从今天起继续今年的博客之旅. 今天继续完善我之前的项目架构,从零开始搭建vue移动端项目到上线,有需要的同学可以 ...
- vue-cli项目使用mock数据的方法(借助express)
前言 现如今前后端分离开发越来越普遍,前端人员写好页面后可以自己模拟一些数据进行代码测试,这样就不必等后端接口,提高了我们开发效率.今天就来分析下前端常用的mock数据的方式是如何实现的. 主体 项目 ...
- Vue + webpack 项目配置化、接口请求统一管理
准备工作 需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题. 又或者后面其他同事接手你的模块,或者改你的bug ...
- 【vue】本地开发mock数据支持
项目离不开数据渲染的支持,为本地开发配置 数据 支持. (一)方式一:安装JSON Server搭建mock数据的服务器 json Server 是一个创建 伪RESTful服务器的工具. 配置流程 ...
- Vue CLI 3 配置兼容IE10
最近做了一个基于Vue的项目,需要兼容IE浏览器,目前实现了打包后可以在IE10以上运行,但是还不支持在运行时兼容IE10及以上. 安装依赖 yarn add --dev @babel/polyfil ...
- vue cli3 项目配置
[转]https://juejin.im/post/5c63afd56fb9a049b41cf5f4 基于vue-cli3.0快速构建vue项目 本章详细介绍使用vue-cli3.0来搭建项目. 本章 ...
随机推荐
- 26种基于PHP的开源博客系统
26种基于PHP的开源博客系统 来源:本站原创 PHP学习笔记 以下列举的PHP开源Blog系统中,除了我们熟知的WordPress之外,大多都没有使用过,其中一些已经被淘汰,或者有人还在使用.除了做 ...
- 2016-2017 CT S03E07: Codeforces Trainings Season 3 Episode 7
B. Pen Pineapple Apple Pen Solved. 题意:将一个序列合并成一个数. 思路:分类讨论一下, 水. #include<bits/stdc++.h> using ...
- c++第三十天
P154~p159:语句1.通常情况下顺序执行. 2.C++提供一组控制流(flow-of-control)语句以支持更复杂的执行路径. 3.空语句的作用:语法上需要一条语句,但是逻辑上不需要. ) ...
- (探讨贴)POJ 1463 树形DP解法的不正确性
POJ1463是一个典型的树状DP题. 通常解法如下代码所示: using namespace std; ; ]; int pre[maxn]; int childcnt[maxn]; int n; ...
- [微信开发] - weixin4j关键类解析
TokenUtil : get()获取我方自定义的token(从配置文件或数据库) checkSignature(Str..... (服务器配置连接验证有效性) /* * 微信公众平台(JAVA) S ...
- JVM的反射实现
java的反射机制 java的反射机制是在运行状态中,对于任意一个类(Class)都能知道他的属性(Field)和方法(Method),对于任意一个对象都能够调用它的方法和属性:这种动态获取信息以及动 ...
- Python学习札记(四十三) IO 3
参考:操作文件和目录 NOTE: 1.Python内置的os模块可以直接调用操作系统提供的接口函数: 2.os.name 打印操作系统的名称:如果是posix,说明系统是Linux.Unix或Mac ...
- [CDOJ887]轻音乐同好会(跳石头)
此题已经无法在UESTC上上传,网上只有玄学题解 题目 题目描述 雪菜为了能让冬马参加轻音乐同好会,瞒着春希,和冬马见面. 为了增进感情,雪菜拉着还没缓过神来的冬马进了游戏厅-- 游戏要求两名玩家在排 ...
- 在iframe外层head中插入link
let src = 'abc.css?v='+Math.random(); let link = window.parent.document.createElement('link'); link. ...
- Learn Rails5.2 Routes。( 很少用到的参数:constraints和redirect)
Naming a Route get 'home/index', as: "different_name" 会得到prefix: different_name代替home_inde ...