vue开发饿了吗外卖app①——最新的vue没有dev-server.js,如何进行后台数据模拟?

最新推荐文章于 2022-03-08 23:56:32 发布

原创最新推荐文章于 2022-03-08 23:56:32 发布 · 349 阅读

0 ·

CC 4.0 BY-SA版权

Vue开发饿了吗外卖app实战专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在最新的Vue项目中使用webpack-dev-conf.js文件模拟后台API数据。通过修改配置文件并引入Express，实现对指定数据文件的请求模拟，适用于前端开发及调试阶段。

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

最新的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,
    },

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
    })
  })
}

注意要重启 npm run dev 才会有效

然后就可以访问 http://localhost:8080/api/seller 等来查看api数据

可以安装jsonview插件来查看格式化的json数据