vue background data simulation

In the latest vue, dev-server.js is replaced by webpack-dev-conf.js

Modify it directly in the webpack-dev-conf.js file when simulating background data.

The following json data is placed in the root directory.

The first step, add after const portfinder = require('portfinder')

// The first step 
const express = require('express' )
const app = express() // request server 
var appData = require('../data.json') // load local data file 
var seller = appData.seller // get corresponding local data 
var goods = appData.goods
 var ratings = appData.ratings
 var apiRoutes = express.Router()
app.use( '/api', apiRoutes) // Request data through routing

 

Step 2: Find the devServer and add the before() method to it

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,
  },
  // The second step is to find devServer and add 
  before(app) {
    app.get('/api/seller', (req, res) => {
      res.json({
        errno: 0,
        data: seller
      }) // The interface returns json data, the data seller configured above is assigned to the data request and then called 
    }),
    app.get('/api/goods', (req, res) => {
      res.json({
        errno: 0,
        data: goods
      })
    }),
    app.get('/api/ratings', (req, res) => {
      res.json({
        errno: 0,
        data: ratings
      })
    })
  }
}