Vue项目搭建中如何使用Mock

一、如何启用 Mock 数据

根目录下输入命令 

npm install mockjs --save-dev 

在文件夹src中，手动创建文件夹mock，在里面创建文件mock.js，写入内容

const Mock = require('mockjs')

// 左侧菜单名

const menuList = () => {  
   const list = [    
        { 
            id: '125', 
            authName: '用户管理', 
            children: [       
                         {          
                             id: '125-1',         
                             authName: '商品列表',         
                             path: ''        
                         }      
                      ]    
       }  
    ]  
    return list
}

Mock.mock('/api/menus', 'GET', menuList)
// 请求的接口和第一个参数路径保持一致

在已有的文件main.js里，一堆import下面，引入mock.js

import './mock/mock.js' 

搭建 mock 服务器

全局安装mock服务器：

npm i @shymean/mock-server -g

 然后输入下面命令（路径可能要改动）启动mock服务器： 

mock -p 8888 -f ./src/mock/mock.js

配置代理转发在根目录新建：

 vue.config.js

module.exports = {  
    publicPath: '/',  
    devServer: {    
            proxy: {      
                '/api': {       
                         target: 'http://localhost:8888/', // 目标服务器        
                         changeOrigin: true,        
                         pathRewrite: {          
                                        '^/api': ''        
                                      }      
                        }    
                   }  
               }
    }

需要请求接口的地方

this.$http.get('/api/menus') 

mock.js 文件-数据量大时 

const Mock = require('mockjs')

// Table列表大量数据
const tableList = {  
        // 20条数据  
        'data|10000': [
               {    
                 // 商品种类    
                 goodsClass: '女装',   
                 // 商品Id    
                 'goodsId|+1': 1,    
                 // 商品名称    
                 goodsName: '@ctitle(10)',    
                 // 商品地址    
                 goodsAddress: '@county(true)',    
                 // 商品等级评价★    
                 'goodsStar|1-5': '★',    
                 // 商品图片   
                 goodsImg: "@Image('100x100','@color','小甜甜')",    
                 // 商品售价    
                 'goodsSale|30-500': 30  
               }
            ]
        }

Mock.mock('/api/table', 'GET', tableList)