vite 配置 vite-plugin-mockjs mockjs

vite 配置 mock

vite-plugin-mock

• 安装

  • yarn add vite-plugin-mock -D
    

• 开发环境使用

  • vite.config.js 中配置

    • import { viteMockServe } from 'vite-plugin-mock'
      ​
      plugins: [
            vue(),
            viteMockServe({
              // default
              mockPath: 'mock',
          ],
      

  • src 下 创建 mock index.ts

    • import { MockMethod } from 'vite-plugin-mock'
      export default [
        {
          url: '/api/get',
          method: 'get',
          response: ({ query }) => {
            return {
              code: 0,
              data: {
                name: 'vben',
              },
            }
          },
        },
        {
          url: '/api/post',
          method: 'post',
          timeout: 2000,
          response: {
            code: 0,
            data: {
              name: 'vben',
            },
          },
        },
        {
          url: '/api/text',
          method: 'post',
          rawResponse: async (req, res) => {
            let reqbody = ''
            await new Promise((resolve) => {
              req.on('data', (chunk) => {
                reqbody += chunk
              })
              req.on('end', () => resolve(undefined))
            })
            res.setHeader('Content-Type', 'text/plain')
            res.statusCode = 200
            res.end(`hello, ${reqbody}`)
          },
        },
      ] as MockMethod[]
      

mock.js 官网

• 安装

  • yarn add mockjs
    

• 使用

  • var Mock = require('mockjs')
    var data = Mock.mock({
        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
        'list|1-10': [{
            // 属性 id 是一个自增数，起始值为 1，每次增 1
            'id|+1': 1
        }]
    })
    // 输出结果
    console.log(JSON.stringify(data, null, 4))
    

项目中具体配置

• mock index.ts

  • import { MockMethod } from 'vite-plugin-mock'
    import { mock, Random } from 'mockjs'
    ​
    const dataGoods = mock({
      'list|10': [
        {
          goods: () => Random.name(),
          price: 3000,
        },
      ],
    })
    export default [
      {
        url: '/mock/getList',
        method: 'get',
        response: (res: any) => {
          return {
            code: 0,
            dataGoods,
          }
        },
      },
    ] as MockMethod[]
    ​
    

• vite.config.ts

  • viteMockServe({
          // default
          mockPath: './mock', // mock文件所在文件夹
          localEnabled: true, // 是否应用于本地
          prodEnabled: false, // 是否应用于生产
          supportTs: true, // 打开后 可以读取 ts 文件模块 请注意 打开后将无法监视.js 文件
          watchFiles: true, // 监视文件更改 这样更改mock的时候，不需要重新启动编译
          // configPath: './mock',
        }),
    

• 测试

  • axios.get('mock/getList').then((res) => {
      console.log(res.data)
    })
    

坑

• 注意 mock 所在的层级
• 我刚开始把 mock 放在了 src 下 结果一直 404 我还以为是代理的问题
• 结果 mock 是和 src 平级的

注意

• 根据官方文档描述，开发环境是使用Connect中间件实现的，可以控制台中查看网络请求记录。生产环境则是通过拦截请求，所以在网络请求中查看不到
• 在使用mock时，通过axios调用接口，不能加上baseURL，否则会变成通过发送网络请求，在网络请求里可以查看到。因为上条所说在开发环境时使用Connect中间件所以没有影响，但是到生产环境就无法拦截到了，导致失败。所以最好两个环境都不加baseURL
• 如果不需要使用该功能，则在vite.config.ts中将localEnabled和prodEnabled都设置为false即可。当然另一种方式是加上baseURL，但是不推荐\