使用vue-cli3时怎么使用mock数据

最新推荐文章于 2024-08-01 09:57:29 发布

Raaabbit

最新推荐文章于 2024-08-01 09:57:29 发布

阅读量9.4k

点赞数

分类专栏：日常踩坑

本文链接：https://blog.csdn.net/github_39457740/article/details/81878121

版权

在前后端分离的开发中，前端常使用mock数据进行测试。在vue-cli3项目中，可以通过devServer配置模拟接口。与vue-cli2不同，vue-cli3需要自定义配置文件来实现mock。在vue-cli2中，可以通过修改build配置并在vue文件中发送请求获取mock数据；而在vue-cli3，需创建配置文件，并在devServer中设定，从而达到同样的效果。

摘要由CSDN通过智能技术生成

使用vue-cli3时怎么使用mock数据

在前后端分离的开发模式中，后端给前端提供一个接口，由前端向后端发请求，得到数据后前端进行渲染。由于前后端开发进度的不统一，前端往往使用本地的测试数据进行数据渲染的测试。

正文开始

在vue-cli构建的项目，我们可以借助devServer开启一个服务，然后我们可以通过路由模拟一个接口来进行测试。
在vue-cli2和vue-cli3中的配置方式是不同的。下面分别展示
##　vue-cli2
先放一张vue-cli2生成项目图片
这里写图片描述
mock文件夹是一个我自己创建的用来存放模拟数据的文件夹，其中有一个json文件，下面我们要对build目录下webpack.dev.conf.js进行配置

// 引入文件
const goodsList = require('../mock/goods.json');
// ……
// 配置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,