当前位置: 首页 > Web前端 > vue.js

mockjs区分环境,过程很有趣

时间:2023-04-01 12:05:01 vue.js

Mockjs区分环境,过程很有意思。网上找了很多mockjs(mockjs不是其他mock插件)环境配置,基本上都是错的。生产环境不需要mocks,开发环境有时需要mocks有时不需要mocks。可能这个功能点太小了,以至于大家不关心它。但是点越小,越有趣。1、你想要达到的效果不能手动注释掉import'./mock',因为只要是人为操作就会存在出错的可能。使用es6模块规则来写,而不是使用common来区分yarnmock和yarnxxx。它很酷,可扩展,并且不需要移动核心代码。2.想到的各种方法和陷阱。1、我们公司以前用的“快递”自己启动一个服务,然后读取名为path的文件夹。内容当然是内容。这样做是可以的,但毕竟不是专业的处理方式。比如同一个路径既是get地址又是post地址。那么需要改代码来区分,模拟出来的数据几乎没有随机性。比如mockjs可以模拟1-12位数字返回,但是现在的方法只能“死写”,对不对?写一个随机函数,然后每次都调用这个函数。越做越大没有意义。最好采用成熟的解决方案。方法二:mockjs下载:yarnaddmockjs-D只供开发使用,谁来生产??call:importMockfrom'mockjs'怎么配置就不说了,太简单了,一会儿可以讲工程方法3:在封装axios请求外,再封装一层mock层,想想看,也太歪了吧。三。知识点和坑点(好玩的来了)网上都说用cross-env来区分环境变量,但是你知道这里有个大坑吗???我选择了“cross-env”:“^6.0.3”在package.json中配置“mock”:“cross-envMOCK=truevue-cli-serviceserve”,我以为大功告成了,main.c中的代码如下。js不执行if(process.env.MOCK==='true'){...}坑点1:cross-env属于node环境,web代码中获取不到这个值,这个值可以在vue.config.js中找到importusmockjs,但是会报错,不能用es6的import方法,需要在commonjs方法中获取,那我们转移战场,在vue.config.js中import我们的mockjs,但是会报错报错,不能使用引入es6的方法,需要commonjs的方法require进来(我想在客户端代码中使用环境变量:process.env.VUE_APP_xxx,但是这个变量的导入语法不支持是否按需导入)坑点2:使用require的方式引入mockjs意味着mock文件的工程化无法用es6的写法来完成。我真的受不了。陷阱三:引入require方法会报找不到Mock.setup的错误。这大概是mockjs本身不想让用户这样引用吧。坑点4:通过require引入并执行,但无效,因为mockjs的实现不是在外面架设一个服务,然后监听一个项目请求。想想其他办法。首先mock由于需要在main.js中引入import的方法,所以我还是这样使用。那么我们其实可以在文件层面解决这个问题。问题已提取。在main.js文件中yarnmocking的时候,加上'"import'./mock'"',yarnxxx去掉"import'./mock'",很清楚,也确实很暴力。说到修改文件节点,我们先规范一个占位符,毕竟需要区分是否插入,插入到哪里,方便后面的同学顺藤摸瓜找到整体逻辑。大家一定要注意,代码一定要连续,有些逻辑不能凭空写出来,比如Vue的mixins方法,这样会导致项目难以交接,无法定位问题等。缺点1.//mock:短小精悍,缺点明显,谁删谁。2./**mock(不要删除)**/:比第一个重要戏剧性。3.不写占位符,直接操作即可。这不符合代码逻辑连贯的原则。新同学可能不知道你的操作是怎么实现的。完全没有感觉的情况下不建议操作,虽然留个占位符Bit字符看起来挺low,但是方便回溯。Node判断文件内容(简单替换)添加逻辑constpath=require('path');constfs=require("fs");letmain=fs.readFileSync(path.resolve(__dirname,'../src/main.js'),'utf-8');main=main.replace('/**mock(不删除)**/',"import'../mock'");fs.writeFile(path.resolve(__dirname,'../src/main.js'),main,'utf8',(err)=>{if(err)throwerr;console.log('成功导入模拟数据');});删除逻辑constpath=require('path');constfs=require("fs");letmain=fs.readFileSync(path.resolve(__dirname,'../src/main.js'),'utf-8');main=main.replace("import'../mock'",'/**mock(不要删除)**/');fs.writeFile(path.resolve(__dirname,'../src/main.js'),main,'utf8',(err)=>{if(err)throwerr;console.log('删除模拟数据');});两个脚本写好后,开始导入(下面代码报错了吗)":"node./mock/delete.jsvue-cli-serviceserve","build":"node./mock/delete.jsvue-cli-servicebuild"},运行一下,你会发现vue-cli-serviceserve不执行,这是因为这条语句需要区分。这里有很多同学入坑了,下面的写法有时会出现bug"scripts":{"mock":"node./mock/add.js&&vue-cli-serviceserve",},正确的写法如下&&需要靠近node语句,否则可能会出现莫名其妙的bug,也是小知识。"scripts":{"mock":"node./mock/add.js&&vue-cli-serviceserve",},我也想过像node./src/mock/add.js这样的代码写在每一行,最好把每条命令都放在node里面,直接用npx或者like可以,但是因为以上原因我不做。这样写会打乱其他同学的写作习惯,把别人弄傻,但是好处不大,所以不要写。4.工程结构根据工程原理,创建一个单独的mock文件夹。这个不要放在src里面,应该和src在同一层级。里面的索引文件负责导出所有的接口,因为考虑到需求量大,可能会新增几十个。界面,所以我还是建议为这个版本的mock界面建立一个文件夹,这样也方便集体删除不留后遗症。如果有些接口需要mock非常复杂的数据形式,那么还是需要单独创建一个文件来存放它们的逻辑内容,虽然mock时不写方法默认是get,我还是建议写get,更直观。这不难但很有趣。