vue4.x 使用mockjs相关配置

Posted 2020-12-09 时间脱臼

一、安装mockjs

npm install mockjs

二、创建mock文件夹

 

 三、创建mock文件

 

 

 

 FzIdentNetCard.js

import Mock from \'mockjs\'

const res = {
    "head": {
        "chanel": "DBK",
        "drbkdt": "20190917",
        "drbktm": "20:30:52",
        "drbksq": "23982132138921398",
        "custid": [],
        "transq": "20190917",
        "transdt": "00008298",
        "respcd": "000000",
        "checkStatus":"1",
        "resptx": "交易成功"
    },
    "body": ["1"]
}
export default ({ mock }) => {
    if (!mock) return;

    Mock.mock(RegExp(\'/api/android/FZPD/FzIdentNetCard.*\'), \'post\', () => {
        return res;
    });
}

　　index.js

import fzBindCardAuth from \'./FzBindCardAuth\'
import fzIdentNetCard from \'./FzIdentNetCard\'
import fzOpenAcct from \'./FzOpenAcct\'
import fzQueryAcct from \'./FzQueryAcct\'
import fzSendMsg from \'./FzSendMsg\'
import fzVerMsg from \'./FzVerMsg\'

/**
 * 模拟数据mock
 *
 * mock是否开启模拟数据拦截
 */

fzBindCardAuth({mock: true});// 关闭mock数据改为false
fzIdentNetCard({mock: true});// 关闭mock数据改为false
fzOpenAcct({mock: true});// 关闭mock数据改为false
fzQueryAcct({mock: true});// 关闭mock数据改为false
fzSendMsg({mock: true});// 关闭mock数据改为false
fzVerMsg({mock: true});// 关闭mock数据改为false

　　四、修改vue.config.js

{
   ...
   chainWebpack: (config) => {
    config.resolve.alias
      .set(\'@\', resolve(\'src\'))
      .set(\'assets\', resolve(\'@/assets\'))
      .set(\'components\', resolve(\'@/components\'))
      .set(\'views\', resolve(\'@/views\'));
    const entry = config.entry("app");
    entry.add("@/mock").end();
  },
  ...  
 
}