vue-cli+webpack进行后台数据模拟？

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1. 其中mock数据为data.json ，在文件的根目录位置。


2. 配置webpack.dev.conf.js，文件所在位置如图在build文件夹下

在文件头部添加如下代码

const express = require('express')
const app = express()
const appData = require('../data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
const apiRoutes = express.Router()
app.use('/api', apiRoutes)

找到devServer

新增黄色字体代码

devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: {
    rewrites: [
      { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
    ],
  },
  hot: true,
  contentBase: false, // since we use CopyWebpackPlugin.
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
      })
    })
    app.get('./api/goods', (req, res) => {
      res.json({
        errno: 0,
        data: goods
      })
    })
    app.get('/api/ratings', (req, res) => {
      res.json({
        errno: 0,
        data: ratings
      })
    })
  }
},

以上是 vue-cli+webpack进行后台数据模拟？ 的全部内容， 来源链接： utcz.com/z/375215.html

回到顶部