[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