问题描述

 问题①：TypeScript + Vue3 使用import Mock from 'mock'引入mockjs引入时报错，如下：

Cannot find module 'mockjs' or its corresponding type declarations.

 问题②：前端项目开发中利用mockJs作为假数据进行请求模拟的过程中，使用Mockjs模拟带有参数的get请求的时候，报错404无法返回正确的结果。

在发送axios请求之后报错404，如下图：

原因分析：

问题一：

  进入到mockjs目录下的index.ts文件，我们可以看到mockjs的导出方式为：export = mockjs。这也正是导致ts报错的原因，因为导出的方式不是CommonJs或ESModule的形式，因此我们要做出相应的配置。

解决方法：

 安装@types/mockjs对mockJs进行声明，使用命令npm i @types/mockjs --save-dev 或是-S都可以，这里要注意，使用yarn add @types/mockjs -S并没有效果，不知是不是我工程的问题，大家可以试一下。

问题二：

  其实这个问题是因为我当时想的比较简单，以为mockjs可以自动获取到query参数，即请求路径?后面的参数，其实这是不行的，在mock中的路径如果为字符串，则需要完整匹配。

解决方法：

 解决方法其实也比较简单，只要我们将字符串匹配改为正则匹配即可，之后便可以匹配到这一次的mock请求了，同时我们可以得到mockjs传入的参数msg：

msg对象结构如下：

这一块的完整代码如下：

再一次尝试后，结果如下：

总结

 可以看到，在使用正则表达式之后问题就迎刃而解了。(因为今晚的游戏行为，导致现在完成文章到写总结的时候已经00:54:09了)。所以还有一些没有完善的地方，只能等下一次再写了。
 如果有想看完整代码的小伙伴，可以到我的gitee上查看，具体的链接如下：
https://gitee.com/Crivk/csdn-related-demo/tree/master/Vue/v3-ts-mockjs。那么这一次的文章就先到这里啦，最近还有一个BaiduMap城市组件使用的分享还在写，但是因为懒还没有怎么写，争取这个周末把它发出来！

补充

2022.9.2

 对参数解析这一块做了优化，使用另一个变量去接取参数。另外在解析字符串的时候也可以使用正则表达式的分组表达式去截取，不过我感觉这个正则的意义不大，直接使用字符串截取再进行转换更为实在。