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，更直观。这不难但很有趣。
