webpack手动搭建vue项目（五）—— 引入mockjs

在我们实际开发中，以前需要等待后台开发完成才能联调，现在只需先协商好数据结构字段等，然后引入mockjs,就可以先一步开发，另外mockjs在单元测试的时候也很重要。

1.安装mockjs

>npm install mockjs --save-dev

2.添加mock目录

|---src/
|    |---index.js
|
|---mock/
|    |---demo //根据项目分目录
|    |    |---demomock.js
|    |---index.js
|

3.增加mock/index.js文件

/** 此处引入各个模块的mockdata */
require('./demo/demomock.js')

增加demo/demomock.js 

import apiPath from '@/api/api-path'
// 引入mockjs
const Mock = require('mockjs')

const getMockData = {
    info(options) {
        return {
            "code": 0,
            "data": {
                "userName": "132",
                "userCode": "123"
            },
            "message": "\u6210\u529F"
        }
    }
}
const postMockData = {
    code(options) {
        let argObj = JSON.parse(options.body)
        return {
            "code": 0,
            "data": Mock.mock({
                "deptCodeSet|1-20": [...new Set([
                    () => {
                        return argObj.node + Mock.mock('@string("upper", 3)')
                    }
                ])]
            }),
            "message": "\u6210\u529F"
        }
    }
    
}

/* Mock.mock( url, get , 返回的数据) */
Mock.mock(RegExp(url + ".*"), 'get', getMockData.info)

/* Mock.mock( url, post , 返回的数据) */
Mock.mock(url, 'post', postMockData.code)

注意此处api-path文件为项目接口请求路径配置文件 

4.配置webpack全局环境变量

webpack.dev.js

const webpack = require('webpack')
const merge = require('webpack-merge')
const common = require('./webpack.base.js')
const path = require('path')

module.exports = merge(common, {
    devtool: 'source-map',
    devServer: {
        contentBase: path.join(__dirname, '../dist'),
        historyApiFallback: true,
        host: '0.0.0.0',  // 一般设置为0.0.0.0 可以供localhost访问和供别人ip访问
        port: 8015,  // 端口
        open: true, // 自动打开浏览器
        compress: true,
        proxy: {
            '/matchName': {
				target: 'http://www.baidu.com',  // 代理目标地址
                pathRewrite: {'^/matchName': '/matchName'}
            }
		}
	},
	plugins: [
		new webpack.DefinePlugin({
			'process.env.Mock': true  // 和后台联调时候此处需要设置为false
		})
	]
})

webpack.sit.js

new webpack.DefinePlugin({
			'process.env.Mock': false
		})

webpack.prd.js

new webpack.DefinePlugin({
			'process.env.Mock': false
		})

5.在入口文件引入mock

src/index.js

//import '@babel/polyfill'  // webpack4.x
//import 'babel-polyfill'  // webpack3.x

// 引入mockjs
process.env.Mock && require('../mock/index.js')

到此小伙伴们就可以开心的去编写代码了！