mockjs报错404，vue3+ts+vite项目使用require引用报错,如何配置和使用mock

酉时
1,068 阅读2分钟

vue3+ts+vite项目使用require引用报错 image.png

安装mockjs，各种配置写完，v3+ts+vite项目不能使用require引入mockjs，最好还是使用import的引入方式，webpack项目使用require动态引入报错，先安装npm i --save-dev @types/node，向tsconfig.json中的compilerOptions下的types属性添加node

image.png

这些解决以后启动项目，请求接口报错404

image.png

解决方法： 第一步：如果你的接口路径写法这样的请改掉，不然会报错的

image.png

第二步：封装接口的时候，如果axios配置了baseUrl，请求路径要把baseUrl写上

image.png

第三步：也是很容易忽略的一个点，一般在项目中都会对axios进行二次封装，那么code也大多都是重新制定的，写mock的配置时的code要与axios封装中的code一一对应，以下是我的实示例，我封装的请求成功code为0，那么mock的配置中请求成功的code也要为0，否则会拿不到数据。

image.png

image.png

第四步（如果你采用第三步可以忽略）： 直接用axios请求，不使用封装后的axios

image.png

最后请求成功

image.png

接下来是mockjs的安装和配置以及使用 第一步：安装mockjs yarn add mockjs,在main.ts中引入 import './mock/index' 第二步：在src目录下创建mock的文件夹，并创建index.ts文件

index.ts
import Mock from 'mockjs'
export const mockData = Mock.mock(/mock\/dataMock/, 'get', {
  'list|1-10': [
      {
          'id+1': 1, //生成id，自增+1
          Msg: '@cname', //生成信息，中国人的名字
          Tel: /^1(5|3|7|8)[0-9]{9}$/, //生成随机电话号码
          Address: '@county(true)' //生成随机地址
      }
  ],
  code: 0,
  message: 'ok'
})

第三步：我是已经对axios进行二次封装了，service就是二次封装过后暴露出来的axios，所以我是直接在api文件夹下创建了mock.ts文件，如果有小伙伴还没有axios二次封装，直接用axios调用也是可以的

mock.ts
import service from '@/utils/request'
export const testMock = () => {
    return service.get('http://localhost:3000/mock/dataMock/')
}

没有封装的小伙伴看这里 image.png

使用mockjs

<button @click="testMock">testMock</button>
const testMock = async () => {
	const res = await MockData()
	 console.log(res)
	//axios.get('http://localhost:3000//mock/dataMock/').then(res=>{
		//console.log(res);
	//})
}

mockjs已经停止维护了，尽量选其他的替代方案，我是因为公司的项目选的mockjs，刚好遇到这些问题了，就想着分享一下。better-mock这个库fork了mock进行了重构，所以替代方案可以选择better-mock，并且它是百分之百兼容mockjs的，用法与mockjs基本上是相同的。只是better-mock的定位是开发环境下和Node.js中的数据mock，所以浏览器兼容这一块可能不是很好

avatar
文章
阅读
粉丝