vue mock server,vue中mock怎么配置

　　本文主要介绍vue本地仿真服务器请求模拟数据的相关信息。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。

原因

　　1.mockjs在本地开发的时候效果很好，但是需要产生MockJS数据的时候效果就不好了。2.当MockJS数据通过module.exports和export实现时，npm run build制作打包时，这些假数据会被打包到app.js文件中，导致文件大，首屏渲染慢。而且，当js文件中的模拟数据量超过webpack的限制时，打包就会失败。3.远程模拟数据是不必要的。像雅皮，网易NEI

场景

　　1.做示范项目时，数据要完全本地化；2.在制作示范项目时，数据应可供业务人员修改；3.mock数据量1w时(因为项目用的数据是6w，十几米的文件都需要这个方法)；4.做项目的时候，前端人员要先定义接口数据，后台人员配合调取。这时候可以把定义好的数据格式直接扔给后台工作人员，尤其是一些没有“增删改”的“检查”项。前端写好之后，基本不需要修改，还是挺方便的。5.基于vue2 cli3项目

方法

　　对于vue cli3项目，生产包打印时，public文件夹中的文件直接复制到publicPath中设置的目录下，不需要webpack编译。开发中用到的json数据、图片等资源文件可以放在public目录下。

mock资源

　　如下，准备一张图片和一个json文件。

　　cat.png，table.json

　　 - src

　　 -公共

　　 -数据

　　 - table.json

　　 -图像

　　-cat.png

配置

　　涉及的文件如下(详见代码):

　　 - src

　　-. env . Development//开发环境配置，主要是配置服务器地址。

　　-. env . Production//生产环境配置，主要是配置服务器地址。

　　-settings . js//一些全局配置，在这里设置publicPath的值。

　　 -实用工具

　　 - mock-request.js //axios请求封装

　　 - api

　　-table . js//请求封装以获取table.json数据

　　 -视图

　　-mockDataTest///用于显示请求结果。

　　 - index.vue

　　 - index.scss

　　 - index.js

　　 -公共

　　 -数据

　　 - table.json

　　 -图像

　　-cat.png

　　 - vue.config.js

vue.config.js + settings.js

　　首先配置访问公共路径。例如，如果您想在访问期间将dist路径添加到地址中，您可以在vue.config.js处对其进行如下配置。

　　模块.导出={

　　public path:process . ENV . node _ ENV=== production ？/ : /dist ，

　　}

　　为了方便调用，记得和settings.js中的publicPath同步修改。

.env.development + .env.production

　　这里主要是配置下部署的服务器的地址。例如，在开发过程中，本地访问地址是http://localhost:8081。定义一个参数，以任何名称存储该地址。

　　VUE应用模拟网址= http://本地主机：8081/

mock-request.js

　　下面是配置下的axios的baseURL。直接读取. env.developer.env.production中配置的服务器地址即可，例如，

　　base URL:process . env . vue _ APP _ MOCK _ URL

　　这里会根据命令自动读取不同环境下配置的服务器地址。

table.js

　　这里涉及到服务器请求。如何请求.json文件的数据，如下图。

　　从 @/utils/mock-request 导入mrequest

　　从“@/settings”导入默认设置

　　const { publicPath }=默认设置

　　导出常量表数据=()={

　　返回请求({

　　URL:public path `/data/table . JSON `，

　　方法：“get”

　　})

　　}

mockDataTest

　　这里是示范效果。

　　1.调用接口，在接口上显示table.json的数据。2.根据代码显示图片(或其他资源，如音乐和视频)。

　　效果如下

代码

　　代码，参考

总结

　　不依赖后台接口简单实现模拟数据请求。所有数据都存储在。json文件。public文件夹中的这些文件是不编译的，方便修改和替换。打包后，可以直接放入静态服务器运行。

　　以上，因为一个演示平台需要，数据、图片、视频可能会被频繁修改和替换，所以是这样实现的。

　　这就是关于vue本地模拟服务器请求的模拟数据的这篇文章。有关vue本地模拟服务器请求的模拟数据的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录

原因

场景

方法