vue实现app问题总结（一）vue-cli本地开发数据Mock

最新推荐文章于 2024-06-21 10:06:36 发布

yuki-li

最新推荐文章于 2024-06-21 10:06:36 发布

阅读量1.9k

点赞数

分类专栏： vue-js

本文链接：https://blog.csdn.net/qq_33276399/article/details/78838119

版权

本文总结了在Vue CLI项目中实现本地开发数据Mock的两种方法：通过修改webpack.dev.conf.js配置GET和POST请求，以及使用JSON Server搭建Mock服务器。详细介绍了配置步骤，包括在旧版和新版Vue模板中的不同处理方式，以及如何通过faker.js生成批量伪数据和设置代理。

摘要由CSDN通过智能技术生成

方法一采用node的express搭建服务

一.旧版本存在dev-server.js的配置方法

build下的dev-server.js中配置
在const app = express()后，const compiler = webpack(webpackConfig)前配置即可，

var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var foods = appData.foods
var pice = appData.pice
var apiRoutes = express.Router()

apiRoutes.post('/foods', function (req, res) {
   
  res.json({
    errno: 0,
    data: foods
  });
})

apiRoutes.get('/seller', function (req, res) {
   
  res.json({
    errno: 0,
    data: seller
  });
})

apiRoutes.get('/goods', function (req, res) {
   
  res.json({
    errno: 0,
    data: goods
  })
})

apiRoutes.get('/ratings', function (req, res) {
   
  res.json({
    errno: 0,
    data: ratings
  });
})

apiRoutes.get('/pice', function (req, res) {
   
  res.js