新版的vue-cli脚手架中少了dev-server.js文件，怎么模拟后台数据呢？

最新推荐文章于 2023-07-09 14:23:07 发布

jackie_bobo

最新推荐文章于 2023-07-09 14:23:07 发布

阅读量804

点赞数

CC 4.0 BY-SA版权

分类专栏： vue2.0

本文链接：https://blog.youkuaiyun.com/jackie_bobo/article/details/80654036

vue2.0 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在新版Vue项目中使用Webpack配置模拟接口，通过Express框架返回JSON数据，实现前后端分离开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

在学习vue.js仿饿了么的时候，由于慕课网这个视频是基于vue1.x的，里面有些东西更改了，新版的vue-webpack-template 中已经去掉了dev-server.js 和dev-client.js,如今已经将dev-server.js 改用webpack.dev.conf.js代替。

如何解决

在参考了网上的教程之后做了修改，再次记录一下。

在webpack.dev.conf.js中引入node中的express框架即后台模拟数据json文件，代码如下：

//这里是模拟后台数据
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/seller', (req, res) => {
        res.json({
          // 这里是你的json内容
          errno: 0,
          data: seller
        })
      }),
      app.get('/api/goods', (req, res) => {
        res.json({
          // 这里是你的json内容
          errno: 0,
          data: goods
        })
      }),
      app.get('/api/ratings', (req, res) => {
        res.json({
          // 这里是你的json内容
          errno: 0,
          data: ratings
        })
      })
    }