vuecli中使用mockjs模拟数据

• 安装mockjs

  npm i -D mockjs --regitry=https://registry.npm.taobao.org

• 使用mockjs需要安装axios，vuecli3提供了相关插件自动配置,项目下安装

  vue add axios

安装完成后项目src目录下新增一个plugins文件夹,有个axois.js可以进行相关配置。项目中可以直接使用this.axios来使用。

• 项目根目录下新建一个mock文件夹。建test.json test.js index.js三个文件如下

  // test.json
  {
  "status": 0,
  "data": [
    {
      "id": 1,
      "name": "张三"
    },
    {
      "id": 2,
      "name": "李四"
    },{
      "id": 3,
      "name": "王五"
    }
  ]
}

  // test.js
  import testJSon from './test.json'

  export function test(req, res){
    return testJSon
  }

  // index.js
  import Mock from 'mockjs'
  import { test } from './test'

  Mock.mock(/\/test$/, test)
  export default Mock

• 在main.js中new Vue前加入

  if (process.env.NODE_ENV === 'mock') {
    require('../mock')
  }

• 在根目录下新建vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

项目中调用就可以了

  this.axios.get('/api/test')
    .then(res => {
      console.log(res)
    })

• package.json中添加scripts

  "serve:mock": "cross-env NODE_ENV=mock vue-cli-service serve"

安装cross-env后 npm run serve:mock 启动