Vue項目中使用mockjs

mockjs功能還是挺強大的，網上好多文章介紹有的說在dev-server.js中導入，這樣的問題是build中摻入了業務邏輯層的文件。有的是在main.js中導入，還有的在組件中導入，但問題是，同一套代碼在構建dev版和prod版的時候還需要手工改代碼，才能自動build。

現在要達到一個目的，就是自動區分dev和prod，可以自動化build，並且mock的代碼單獨放在業務邏輯層裏。

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

<% if (htmlWebpackPlugin.options.mockjs) { %>
      <script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
    <% } %>

在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一定要用小寫，大寫會不起作用