Vue3 第三十五篇：集成mockjs

1.依赖：（已安装则跳过）

yarn add axios 

yarn add mockjs

yarn add vite-plugin-mock

2.配置插件vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      // default
      supportTs: true,
      logger: false,
      mockPath: "./mock/"
    }),
  ]
})

{
supportTs?: boolean; --是否读取ts文件模块，设置为true时不能读取js文件
logger?:boolean; --是否在控制台显示请求日志
mockPath?: string;  --设置模拟数据的存储文件夹，如果不是index.js需要写明完整路径
ignore?: RegExp | ((fileName: string) => boolean);--读取文件时忽略指定格式的文件
watchFiles?: boolean;--是否监视mockPath文件夹内文件的修改
localEnabled?: boolean;--设置是否启用本地 xxx.ts 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能
ignoreFiles?: string[]; --读取文件时忽略的文件
configPath?: string;--设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时，将首先读取并使用该文件。 配置文件返回一个数组
prodEnabled?: boolean;--设置打包是否启用 mock 功能
injectFile?: string;--如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}。这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。如果代码直接写在main.ts内，则不管有没有开启,最终的打包都会包含mock.js
injectCode?: string;--injectCode代码注入的文件,默认为项目根目录下src/main.{ts,js}
}

3.构建API

在根目录下新建mock文件夹，并在其中新建index.js文件，模拟一个API请求：

const MockAPI = [
    {
        url: "/api/getUsers",
        method: "get",
        response: () => {
            return {
                code: 0,
                message: "ok",
                data: {
                    'rows|10': [{
                        id: '@guid',
                        name: '@cname',
                        'age|20-30': 23,
                        'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
                    }]
                },
            }
        }
    }
]

export default MockAPI

4.使用

axios.get('/api/getUsers').then(res=>{
      console.log(res.data)
    })