【Vue】Vue-cli之Mock.js 模拟数据实现及构建

最新推荐文章于 2024-01-15 20:00:00 发布

AsnLee

最新推荐文章于 2024-01-15 20:00:00 发布

阅读量4.3k

点赞数 5

分类专栏： Vue 文章标签： Vue Mock

本文链接：https://blog.csdn.net/qq_41597258/article/details/86534076

版权

本文介绍了在Vue脚手架中使用Mock.js模拟数据的详细步骤，包括本地代理解决跨域问题，使用devServer的after中间件和Mock自定义XHR拦截，以及模块封装和分块。通过这些方法，前端开发者可以独立于服务端进行开发，提高效率。

摘要由CSDN通过智能技术生成

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发更加独立自主，不会被服务端的开发所阻塞。

以下介绍了Mock使用的基础语法，小伙伴们也可直接拿来主义，配合Vscode live-server插件愉快的进行调试啦~

<pre id="show"></pre>
<img src="" alt="" srcset="" id="imgSrc">

<script>
   var data = Mock.mock({
      'list|1-10': [{
         'id|+1': "@increment"
       }]
    })

    console.log(data.list)

    //document.getElementById("imgSrc").setAttribute("src", data.list[0].id)
    document.getElementById("show").innerHTML = JSON.stringify(data, null, 4)

那如何在Vue脚手架中使用呢？

1. 本地代理解决跨域， devServer->proxy 具体实现可百度
2. 开发环境利用devServer->after中间件、构建使用Mock自定义XHR拦截