在vue3中的vite中mock数据

原创已于 2024-03-26 21:24:26 修改 · 990 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2024-01-23 21:10:07 首次发布

本文介绍了如何在使用Vite构建项目时，安装并配置vite-plugin-mock插件，生成mock数据，以及在页面中调用mockAPI以进行单元测试。具体步骤包括安装依赖、配置mock路径、创建mock数据文件和使用axios获取mock数据。

一，需要安装依赖插件

npm i mockjs vite-plugin-mock

二，在 vite.config.ts 文件中配置 vite-plugin-mock

//导入插件
import { viteMockServe } from 'vite-plugin-mock'
 
export default defineConfig({
  plugins: [vue(),
    viteMockServe({
      supportTs:false,
      logger: false,
      mockPath: "./mock/"
    })
  ]
})

三，在根目录下创建mock文件夹，注意是根目录，新建文件 mock/index.js


mock数据
import from 'mockjs'
const obj= Mock.mock({
'list|5':[
   {
    'id':'@id',
     'name':'@cname',
      'title':'@ctitle(6,10)'
   }
 ]
})

export default [
  {
    url: "/api/stations",
    type: "get",
    response: () => {
      return obj.list
    }
  }，
  {
 url: "/api/user",
    type: "get",
    response: () => {
      return obj.list
    }

}
]

四，在需要的页面调用

//导入axios
import axios from axios

const getStationData = () => {

    axios.get("/api/stations").then(res => {

    const data = res.data
    console.log(data)
  })
}

//函数getStationData需要调用，如果不想调用可以直接把这个函数删掉