Vue项目中使用mockjs

mockjs功能还是挺强大的，网上好多文章介绍有的说在dev-server.js中导入，这样的问题是build中掺入了业务逻辑层的文件。有的是在main.js中导入，还有的在组件中导入，但问题是，同一套代码在构建dev版和prod版的时候还需要手工改代码，才能自动build。

现在要达到一个目的，就是自动区分dev和prod，可以自动化build，并且mock的代码单独放在业务逻辑层里。

首先在index.html中条件化引入mockjs

<% if (htmlWebpackPlugin.options.mockjs) { %>
      
    <% } %>

在webpack.dev的配置文件中配置一个参数，prod不用改动

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      mockjs: true
    })

这样就可以保证只在dev环境引入mockjs了

下面在main.js中区分是开发环境还是生产环境，动态导入mockjs的业务逻辑划分代码

//init函数中去new Vue
if (process.env.NODE_ENV !== 'production') {
	import('./mock/label').then(init);
} else {
...
}

然后在label.js中实际导入业务层的mockjs代码

import '@operation/label-doc/mock.data';

/* global Mock:false */
Mock.XHR.prototype.withCredentials = true;

mock.data中才是真正的mockjs逻辑

Mock.mock(/.*label-doc-templates.*/, 'get', getData);


Mock.mock(/.*label-doc.*/, 'post', (req) => {
	let body = JSON.parse(req.body);
	console.log('label-doc...post', body.content);
	return {};
});

 

几个注意点：

1）跨域访问需要改Mock的withCredentials，否则ajax请求不会带cookie

2）mock函数中第二个参数的REST方法，post，get一定要用小写，大写会不起作用