vue项目中用mock+express 模拟接口返回值

1、安装mock,express

npm i express -D

npm i mockjs -D

创建模拟数据文件夹mock/，再创建mock/index.js

const express = require('express') // 引入express
const Mock = require('mockjs') // 引入mock

let app = express()

// 解决跨域
app.use(function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS')
  res.header('Access-Control-Allow-Headers', 'X-Requested-With')
  res.header('Access-Control-Allow-Headers', 'Content-Type')
  next()
})
// 获取零售户信息
app.use('/mockapi/test', function (req, res) {
  console.log('mockAPI截取的数据了')
  console.log(req)
  res.json(Mock.mock({
    'code': 0,
    'msg': '执行成功'
  }))
})

app.listen('8090', () => {
  console.log('监听端口 8090')
})

创建完成后，切换到mock目录下，运行 node index.js
此时，在浏览器输入 http://127.0.0.1:8090/mockapi/test 即可获取{code:0, msg:'执行成功'}
这样的话，一个简单的本地数据服务器就搭建起来了，只要在vue项目中的请求路径和mock/index.js中的路径匹配起来就可以模拟接口数据返回了，模拟时间的话，可以在返回最值里加上setTimeout(()=>{//执行}, 1000)
我在项目中是配置.env文件

VUE_APP_BASE_API="http://127.0.0.1:8090/mockapi"

配置request.js

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API
})

export default service

index.vue页面中

import request from '@/utils/request.js'
request({
	url: '/test',
	method: 'get'
}).then(res => {
	console.log(res)
	// 拿到 {code:0, msg:'执行成功'}
})