vue-cli3中如何使用mockjs

这篇文章主要介绍"vue-cli3中如何使用mockjs"，在日常操作中，相信很多人在vue-cli3中如何使用mockjs问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"vue-cli3中如何使用mockjs"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

一、安装

安装代码如下：

yarn add mockjs// 或者npm i mockjs -S

二、搭建mock环境

1、我们通过在根目录中新建mock目录，在这个目录中我们新建一个index.js文件和modules文件夹。

index.js代码如下：

// index.jsconst Mock = require('mockjs');const mockFiles = require.context('./modules', false, /\.js$/);let mocks = [];mockFiles.keys().forEach(key => {  mocks.push(...mockFiles(key))})mocks.forEach(item => {  Mock.mock(item.url, item.type, item.response)})

在modules文件夹中的user.js代码如下:

// modules/user.jsconst userList = {    url: "/user/list",    type: "get",    response: () => {        return {            code: 20000,            data: [                {                    "id": 1,                    "username": "zhoujielun",                    "password": "123456"                },                {                    "id": 2,                    "username": "guojingming",                    "password": "666666"                },            ]        }    }}const userList1 = {    url: "/user/list1",    type: "get",    response: () => {        return {            code: 20000,            data: [                {                    "id": 1,                    "username": "zhoujielun",                    "password": "123456"                },                {                    "id": 2,                    "username": "guojingming",                    "password": "666666"                },            ]        }    }}module.exports = [    userList,    userList1,]

2、在main中引入，代码如下：

require("../mock");

当我们完成到这边的时候其实环境已经搭建的差不多了，下面我们在进行优化。

在我们的根目录中新建个.env文件：

// .envVUE_APP_MOCK=true

完成之后我们在进行修改一下main.js：

// VUE_APP_MOCK的值为true，并且在开发环境下if (process.env.VUE_APP_MOCK && process.env.NODE_ENV === 'development') {  require("../mock");}

到这一步我们就完成了mock的数据环境搭建了。

三、使用

我们在使用的使用需要注意的是在接口中的url和type要与我们的mock中定义的相同。代码如下：

// request.jsimport axios from 'axios'import { Message } from 'element-ui'// create an axios instanceconst service = axios.create({    baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url    // withCredentials: true, // send cookies when cross-domain requests    timeout: 5000 // request timeout})// request interceptorservice.interceptors.request.use(    config => {        return config    },    error => {        // do something with request error        console.log(error) // for debug        return Promise.reject(error)    })// response interceptorservice.interceptors.response.use(    response => {        const res = response.data;        return res;    },    error => {        console.log('err' + error) // for debug        Message({            message: error.message,            type: 'error',            duration: 5 * 1000        })        return Promise.reject(error)    })export default service

api层中代码：

// index.jsconst moduleFiles = require.context('./modules', false, /\.js$/);let apis = {};moduleFiles.keys().forEach(key => {    // 获取文件名，将 ./ 和 .js 替换为空， 最终格式  common    const fileName = key.replace(/(\.\/|\.js)/g, '');    // 填充数据    apis[fileName] = moduleFiles(key);})export default {    ...apis}

// modules/user.jsimport request from '@/utils/request'export function getList() {    return request({        url: '/user/list',        method: 'get'    })}

完成之后我们在views层调用api接口,代码如下：

import api from "@/api";api.user.getList().then(res => { console.log(res) });

到此，关于"vue-cli3中如何使用mockjs"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！