Vue3项目配置Mock模拟接口数据

1.安装mockjs和vite-plugin-mock
npm i mockjs vite-plugin-mock
2.在项目根目录中新建mock文件夹，再新建一个index.js文件写入代码例子如下：

export default [{
  type: 'post',
  url: '/Outlet/getAreaList',
  response: () => {
    return {
      "result": "success",
      "msg": "获取成功",
      "data": [{
        "region_id": 114
      }]
    }
  }
}]

3.修改vite.config.js，如下：

import { viteMockServe } from 'vite-plugin-mock'
 plugins: [
   vue(),
 viteMockServe({
		 mockPath: "./mock/", //mock文件地址 
     	localEnabled: false, // 开发打包开关 
     	prodEnabled: true, // 生产打包开关 // 这样可以控制关闭mock的时候不让mock打包到最终代码内 
       supportTs: false //打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件 ,
           logger: false, //是否在控制台显示请求日志 
            })
]

参数说明

mockPath

type: string
default: mock
设置模拟.ts 文件的存储文件夹
如果watchFiles：true，将监视文件夹中的文件更改。 并实时同步到请求结果
如果 configPath 具有值，则无效

supportTs

type: boolean
default: true
打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。

ignore

type: RegExp | ((fileName: string) => boolean);
default: undefined
自动读取模拟.ts 文件时，请忽略指定格式的文件

watchFiles

type: boolean
default: true
设置是否监视mockPath对应的文件夹内文件中的更改

localEnabled

type: boolean
default: command === 'serve'
设置是否启用本地 xxx.ts 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能

prodEnabled

type: boolean
default: command !== 'serve'
设置打包是否启用 mock 功能

injectCode

type: string
default: ''
如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}
这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。
如果代码直接写在main.ts内，则不管有没有开启,最终的打包都会包含mock.js

injectFile
type: string
default: path.resolve(process.cwd(), 'src/main.{ts,js}')
injectCode代码注入的文件,默认为项目根目录下src/main.{ts,js}

configPath
type: string
default: vite.mock.config.ts
设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时，将首先读取并使用该文件。 配置文件返回一个数组

logger

type: boolean
default: true