一、简便方法

无需引入其他内容，直接使用devServer下的before方法

/*文件位置为build>webpack.dev.conf.js*/
//方法1
const devWebpackConfig = merge(baseWebpackConfig, {
      devServer: {
        //before方法：能够在其他所以的中间件之前执行自定义的中间件
        before(app) {
          app.post('/api/login', function(req, res) {
            res.json({
              type: 0,
              data: {
                s: "post请求"
              }
            })
          })
          app.get('/api/login', function(req, res) {
            res.json({
              type: 0,
              data: {
                s: "get请求"
              }
            })
          })
        }
      })
//方法2
//如果需要多个则把东西放入js内引入即可
 before: require('../mock/dev')
 
 //dev.js
app.post('/api/login', function(req, res) {
  res.json({
    type: 0,
    data: {
      s: "post请求"
    }
  })
})
app.get('/api/login', function(req, res) {
  res.json({
    type: 0,
    data: {
      s: "get请求"
    }
  })
})

那么我们启动后如果post请求/api/login则会直接返回我们在这里设置的结果！

如果只是简单的需求数据！那么到这一步就可以结束了！例子：

  this.$axios({
    method: 'post',
    url: '/api/login',//同before内的参数
    data: {
        userName: 'Lan',
        password: '123'
    }}).then(function (response) {
    console.log(response)
    ;})

这个就相当于在开发环境新增个临时接口来返回数据！值得注意的是，每次修改都需要重新启动！

二：mock简便方法

1、安装mock

npm install mockjs

2、在根目录新建mock/index.js

const Mock = require('mockjs')
// const Random = Mock.Random
// 使用mockjs模拟数据
Mock.mock('/dev-api/api/user/login', {token: '234', code: 20000})

方法1：Mock.mock( rurl, rtype, function( options ) ) 

例：

Mock.mock('/api/data', (req, res) => {    
  return {token: '234', code: 20000}
})

方法2：Mock.mock( rurl, rtype, template ) 

例：

Mock.mock('/dev-api/api/user/login', {token: '234', code: 20000})

• rurl 可选
  表示要拦截的url，可以使字符串，也可以是正则

• rtype 可选
  表示要拦截的ajax请求方式，如get、post

• template 可选
  数据模板，可以是对象也可以是字符串

• function(option) 可选
  表示用于生成响应数据的函数

参数介绍完，就该说说怎么使用了

3、打开main.js引入

console.log(process.env) //一般开发环境process.env.NODE_ENV === 'development'就是等于这个
if (process.env.NODE_ENV === 'development') {
  require('../mock')
}
//

注:../mock路径是简写，会自动在当前文件夹先查询mock.js 没有就查询/mock/index.js，具体可以查看文档

4、创建vue，随便弄个测试文件了！

<template>
  <div>
    <button @click="clicks">提交</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loginForm: {
        username: 'admin',
        password: '111111'
      }
    }
  },
  methods: {
    clickss () {
    //需要在main.js 内先引入axios
      this.$axios({
        url: '/dev-api/api/user/login',
        method: 'get',
        params: {}
      }).then(res => {
        console.log(res)
      })
    }
  }

}
</script>

<style></style>

但是我们会发现，控制台内的Network并没有请求信息，那是因为请求被mock拦截了！并不妨碍console.log(res)数据的出来！

这样我们就基本可以使用了！

3、复杂版本

复杂的则需要结合1和2的方法了！