vue-cli3中,使用mock模拟数据的配置

1,911 阅读1分钟

cli3 推崇自动化!和 cli2有很大区别。

1.在根目录下创建一个mock文件夹,用来存放模拟数据json文件;

2、在根目录中找到vue.config.js这个文件,修改为下面的配置:

const appData = require('./mock/data.json')
// 正常写1个常量即可,下面3个常量可以忽略
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings

module.exports = {
 devServer:{
    port:8080,
     // 3个mock
    before(app){
      app.get("/api/seller",(req,res)=>{
        res.json({
          errno:0,
          data:seller
        })
      })
      app.get("/api/goods",(req,res)=>{
        res.json({
          errno:0,
          data:goods
        })
      }),
      app.get("/api/ratings",(req,res)=>{
        res.json({
          errno:0,
          data:ratings
        })
      })
    }
  }
};

测试mock是否创建成功 在vue组件里

  a(){
      axios.get("/api/seller").then(res => {
        console.log(res)
      })
  },

搞定!