vue-cli2.5版本使用mock拦截全局数据请求

---

前言

提示：本篇文章讲述了在带有webpack.dev.con.js文件的vue-cli 2.x架构中如何使用mock，配置con.js拦截ajax请求，以实现mock的方式

一、什么是mock

mock 的意思是模拟，也就是模拟接口返回的信息，用已有的信息替换它需要返回的信息，从实现对前端模块的测试。

二、安装mock

在vue-cli项目文件夹下运行此命令

F:\vue2.5.1>npm install mockjs

二、使用步骤

1.创建模拟数据文件夹

1. 在项目中（项目根目录或者src目录下）创建mock文件夹，作为模拟数据的专用文件夹
2. 在mock文件夹下创建index.js
3. index中写入模拟数据的函数

///requrie  引用mockjs
const Mock = require('mockjs')
///写函数
module.exports = function (app) { 
    // node中的express框架
    // 参数1： 接口地址；参数2：服务器处理函数
    app.use('/one', (req, res) => {
    ///将拦截 请求路径为'one'的请求，并返回json格式的数据
      // 随机生成一个对象，下列@为mockjs语法，能够随机生成想要的数据，详细用法请baidu.com
      var data = Mock.mock({
        id: '@id()',
        username: '@cname()',
        date: '@date(yyyy-MM-dd)',
        description: '@paragraph()',
        email: '@email()',
        'age|18-40': 0
      })
      // console.log(data)
      // 将模拟的数据转成json格式返回给浏览器
      res.json(data)
    }) 
}

2.在webpack.dev.con.js中配置

const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

///添加下行配置，对刚刚的文件进行引用，注意路径要对
const appData = require('../mock/index');

在DevServer下使用before拦截请求

 devServer: {

    before(app) {///用于模拟数据
      appData(app);
    },
    ///上述函数用于拦截ajax请求，倘若有则
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
 

注意

修改后要重新运行一下，另外附js引用、导出的用法
另 有public目录框架下的配置方法
若有问题可邮箱：1719311353@qq.com