[TOC] ## 开启mock 修改环境变量文件(.env.development .env.production .env.test)中VITE_USE_MOCK=true ## 以系统mock示例账户管理为例说明 ### 定义mock数据 在mock/demo/system.ts 文件中定义如下代码 ``` //模拟接口数据 const accountList = (() => { const result: any[] = []; for (let index = 0; index < 20; index++) { result.push({ id: `${index}`, account: '@first', email: '@email', nickname: '@cname()', role: '@first', createTime: '@datetime', remark: '@cword(10,20)', 'status|1': ['0', '1'], }); } return result; })(); ``` > mock 的值可以直接使用[mockjs](http://mockjs.com/examples.html)的语法。 ~~~ //导出接口定义 export default [ { url: `${baseUrl}/system/getAccountList`, timeout: 100, method: 'get', response: ({ query }) => { const { page = 1, pageSize = 20 } = query; return resultPageSuccess(page, pageSize, accountList); }, } ] ~~~ ### 定义mock地址 在src/api/demo/system.ts 文件中定义接口访问地址如下所示 **注：接口地址必须以mock开头(目的是和正式接口进行区分,如果mock地址和正式地址接口名称不相同也可以不用加mock,mock标识符的定义在baseUrl中)** ~~~ enum Api { AccountList = '/mock/system/getAccountList', .... } export const getAccountList = (params: AccountParams) => defHttp.get<AccountListGetResultModel>({url: Api.AccountList, params}); ~~~ ### 使用mock接口 系统提供内置示例,路径如下 src/views/demo/system/account/index.vue  > baseUrl说明,为mock请求的统一父路径,在mock/_util.ts文件中定义，本例示例值为/jeecgboot/mock