vue使用mock，模拟后台接口

原文：https://blog.csdn.net/bocongbo/article/details/81700843

1、 安装

npm install mockjs

2、在src目录下新建mock目录，结构如下：

mock.jpg

3、index.js内容如下：

const Mock = require('mockjs');
//格式： Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/api/login', 'get', require('./json/login'));

4、json文件内容如下，以login.json为例：

{
    "access_token": "eyJh...",
    "refresh_token": "eyJhbG...",
    "flag": null
}

5、在main.js入口文件中引入mock数据，不需要时，则注释掉。

import Vue from 'vue';
import App from './App';
import router from './router';
 
require('./mock'); //引入mock数据，关闭则注释该行
 
Vue.config.productionTip = false;
 
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

6、在vue模板访问

<template>
  <div class="hello">
    
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
    }
  },
  created(){
    axios.get('/api/login').then((res)=>{
      console.log(res);
      }).catch((err)=>{
        console.log(err);
        });
  }
}
</script>>