mock

mock使用优势：
前后端同时开发的时候，后端接口数据没有出来，前端可以mock假数据，模拟开发

1，安装mock依赖，指令：cnpm install axios --save

2，在main.js中引入mock：import './mock';

3，在src下面建一个mock文件夹，方便管理

index.js
modules文件夹
  mock-data.js
  mock-order.js
  ......

4, index.js内容

if (process.env.NODE_ENV.indexOf('mock') !== -1) {
  //当测试环境是mock的话使用一下mock假数据，否则正常调接口
  require('./modules/mock-data');
  require('./modules/mock-order');
}

5, mock-data.js内容

import Mock from 'mockjs';//引入mock.js数据
Mock.mock(/\/list/, 'get', (options) => {//匹配以list结尾的，返回
  return responseSuccess([
    {name: 'Vue',url: 'https://cn.vuejs.org/'},
    {name: 'Vue Router',url: 'https://router.vuejs.org/zh/'}
  ]);
});
const responseSuccess = (data) => Mock.mock({//成功的回调函数
  state:'OK',
  body: data,
});
const responseError = (data) => Mock.mock({//失败的回调函数
  state: "ERROR",
  errorCode: "BUSINESS_EXCEPTION",
  errorMessage: "",
});
export { responseSuccess, responseError };

6, mock-order.js内容

 import Mock from 'mockjs';
    import { responseSuccess, responseError } from '@/mock/modules/mock-data';
    Mock.mock(/todo\/user/, 'get', (options) => {
      return responseSuccess({
        userId: '@guid',
        userName: '@cname',
        customerId: '@guid',
        manager: '@cname',
        email: '@email',
      })
    })

7，在config下dev.env.js文件中，配置一个新的mock的环境变量env=mock

// 如果运行命令中存在--env=mock，那就使用mock数据，否则使用development

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  // 在此处添加一个 mock环境变量
  NODE_ENV: process.argv[4].indexOf('--env=mock') !== -1 ? '"mock"':'"development"'
})

注：process.argv里面的值，是在终端终中，重新运行打印出来的，可以找到刚刚配置的变量--env=mock

8, 在package.json中配置环境变量，运行npm run mock时候，走的是mock数据

"mock": "webpack-dev-server --inline --progress --env=mock --config build/webpack.dev.conf.js",

注：微信复制一般都会出错，最好会手输入一下命令

9，在页面中调用(直接使用调用接口的方法)

getList(){
  axios.get("technology/list").then((data) => {
      console.log(data, "data");
  }

注：这样直接就可以获取到mock中的数据了，但是network中，没有显示此接口信息

补充内容：

1, 项目中，webpack就是通过process.env属性加以区分开发环境、集成环境、生产环境等。
2, process.env是Nodejs提供的一个API，那么如果想用process.env.NODE_ENV，就必须先设置其值才能用。
package.json

"scripts": {
    "dev": "set NODE_ENV=development && webpack-dev-server --open --hot",
    "build": "set NODE_ENV=production && --progress --hide-modules"
     ......
}

注：但是window/MAC配置是不一样的，所以无法两个兼容器打包项目。

4,解决window/MAC打包问题，插件cross-env出现了，他是一个跨平台设置环境变量的第三方包

• 安装命令：npm install --save-dev cross-env
• 配置package.json就可以了

"scripts": {
   "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --mode=production  --progress --hide-modules"
     ......
}

5，process.argv 属性会返回一个数组，

• process.argv[0]——返回启动Node.js进程的可执行文件所在的绝对路径
• process.argv[1]——为当前执行的JavaScript文件路径
• 剩余的元素为其他命令行参数