v-cli 使用 build 里面的 webpack.dev.conf.js 模拟本地数据

最新推荐文章于 2023-12-09 19:11:11 发布

原创

最新推荐文章于 2023-12-09 19:11:11 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在v-cli项目中通过修改webpack.dev.conf.js配置，结合portfinder和db.json文件，模拟本地数据。在devServer中添加相关配置，确保每个数据项包含id，然后在.vue文件中使用v-for指令渲染数据，最后通过cnpm run dev重启项目，展示模拟数据成功的效果。

1. 在webpack.dev.conf.js 里面找到 const portfinder = require(‘portfinder’),然后在下面写上以下代码：

<strong>//添加mock数据
//node.js开发框架express，用来简化操作
const express = require('express');
//创建node.js的express开发框架的实例
const app = express();
//加载本地的json地址
var appData = require('../db.json');
var apiRoutes = express.Router();
app.use('/api',apiRoutes);</strong>

接着，找到 devServer 的选项，在其｛｝里面补上一下代码：

//添加mock接口数据
before(app) {
  app.get('/api/appData',(req, res) => {
    res.json({
      data: appData
    })//接口返回json数据，上面配置的数据appData就赋值给data请求后调用
  })
}

操作如下图：