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来搭建项目. 本章 ...
随机推荐
- Python3 pandas用法大全
Python3 pandas用法大全 一.生成数据表 1.首先导入pandas库,一般都会用到numpy库,所以我们先导入备用: import numpy as np import pandas as ...
- 20145104张家明 《Java程序设计》第6周学习总结
20145104张家明 <Java程序设计>第6周学习总结 教材学习内容总结 第10章与11章总结 标准输入输出 System.in: 标准输入,默认关联到键盘(终端输入) System. ...
- 20145312《网络对抗》 逆向及Bof基础实践
20145312 <网络对抗> 逆向及Bof基础实践 1 逆向及Bof基础实践说明 1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:mai ...
- 我是如何通过debug成功甩锅浏览器的:解决fixed定位元素,在页面滚动后touch事件失效问题
如果你关注我应该知道,我最近对PC端页面进行移动适配.在这个过程中,为了节省用户300ms的时间,同时给予用户更及时的点击反馈(这意味着更好的用户体验),我在尝试使用移动端独有的 touchstart ...
- 更改UBoot实现通过loady命令下载代码【转】
本文转载自:https://blog.csdn.net/qq_36430621/article/details/69630391 最近入手了一块友善之臂的NanoPc-T3,个人感觉还不错,板子的工艺 ...
- 如何解决ubuntu报的错误:You must put some 'source' URIs in your sources.list
答:添加deb-src开头的源,如 deb-src http://cn.archive.ubuntu.com/ubuntu/ bionic-updates multiverse
- Python os.system()调用.sh脚本
参考: python调用shell脚本的两种方法| Jeff的妙想奇境 已解决--求教python如何调用.sh文件- 查看主题• Ubuntu中文论坛 CODE #!/usr/bin/env pyt ...
- POJ 2288 Islands and Bridges(状压dp)
http://poj.org/problem?id=2288 题意: 有n个岛屿,每个岛屿有一个权值V,一条哈密顿路径C1,C2,...Cn的值为3部分之和: 第1部分,将路径中每个岛屿的权值累加起来 ...
- 创建maven或者Gradle项目的时候GroupId和ArtifactId以及Version是什么意思?
GroupId 是项目组织的唯一标识符,在实际开发中对应JAVA的包的结构,就是main目录里java的目录结构,如 ‘com.itcast.demo’. ArtifactId是项目的唯一标识符,在实 ...
- 并发编程-synchronized关键字大总结
0.synchronized 的特点: 可以保证代码的原子性和可见性. 1.synchronized 的性质: 可重入(可以避免死锁.单个线程可以重复拿到某个锁,锁的粒度是线程而不是调用).不可中断( ...