Vue项目开发mock数据

数据模拟

一、使用开发服务器配置before选项，可以直接编写接口，提供mock数据

编写接口

// webpack.dev.conf.js或webpack.conf.js
devServer: {
    before(app){
      app.get('/api/xxx',(req,res)=>{
        res.json([{name:'物品1',price:'666'},{name:'物品2',price:'888'}])
      })
    }
  }

调用

import axios from 'axios'
export function getData(){
  return axios.get('/api/xxx').then(res=>res.data)
}

二、代理，使用node服务器返回mock数据

设置开发服务器代理选项可以有效避免接口出现的跨域问题

// webpack.dev.conf.js或webpack.conf.js
devServer: {
    proxy:'http://localhost:3000'
  }

测试接口

//需要安装express ：npm i express
const express=require('express'),
app=express()
app.get('/app/xxx',(req,res)=>{
  res.json([{name:'物品1',price:'666'},{name:'物品2',price:'888'}])
})
app.listen(3000)

调用同上