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

stoneSkySpace

于 2019-04-16 09:43:45 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/stone10086/article/details/89326749

vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中设置mock数据，包括创建mock文件夹存放json数据，修改vue.config.js配置文件引入mock数据，并通过axios在项目中调用mock数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在根目录下创建一个mock文件夹，用来存放模拟数据json文件；
2、在根目录中找到vue.config.js这个文件，修改为下面的配置：

const mockdata = require('./mock/test.json');

module.exports={
  devServer: {
    port:4000,
    before(app){
      app.get('/goods/list',(req,res,next)=>{
        res.json(mockdata);
      })
    }
  }
}

配置好后，我们就可以直接在vue中调用：

// 利用了axios
axios.get("/goods/list").then(res => {
   this.goodsList = res.data.result;
}).catch(error=>{
   console.log(error);
});