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

使用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,