1、插件安裝
npm install mockjs vite-plugin-mock -D
2、添加mock目錄及其文件
新建文件/src/mock/user.ts
import { MockMethod } from 'vite-plugin-mock';
// 單純的使???的返回數(shù)據(jù)話，可以不?引?mockjs
// http://mockjs.com/examples.html
import Mock, { Random } from 'mockjs';
export default [
{
url: '/api/createUser',
method: 'get',
response: () => {
return {
code: 200,
message: 'ok',
data: Mock.mock({
'list|4': [
{
id: '@id',
name: '@cname',
age: Random.integer(1, 100),
address: '@county',
city: '@city',
province: '@province',
email: Random.email(),
phone: /^1[0-9]{10}$/,
regin: '@region',
url: '@url',
date: Random.date('yyyy-MM-dd')
}
]
})
};
}
}
] as MockMethod[];
3怎栽、在項目根文件夾下創(chuàng)建mockProdServer.js
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
import userMock from './src/mock/user';
export function setupProdMockServer() {
createProdMockServer([...userMock]);
}
4、在 vite.config.js 中使用vite-plugin-mock插件
// mock數(shù)據(jù)
import { viteMockServe } from 'vite-plugin-mock';
// https://vitejs.dev/config/
export default ({ mode, command }) => {
const prodMock = false;
return defineConfig({
plugins: [
...
viteMockServe({
mockPath: './src/mock', // 設(shè)置模擬.ts 文件的存儲文件夾
localEnabled: command === 'serve', // 設(shè)置是否啟用本地 xxx.ts 文件宿饱，不要在生產(chǎn)環(huán)境中打開它.設(shè)置為 false 將禁用 mock 功能
prodEnabled: command !== 'serve' && prodMock, // 設(shè)置打包是否啟用 mock 功能
supportTs: true, // 打開后熏瞄，可以讀取 ts ?件模塊。請注意谬以，打開后將?法監(jiān)視.js ?件强饮。
watchFiles: true, // 監(jiān)視?件更改，并重新加載 mock 數(shù)據(jù)
/* 如果生產(chǎn)環(huán)境開啟了 mock 功能,即prodEnabled=true.則該代碼會被注入到injectFile對應(yīng)的文件的底部为黎。默認為main.{ts,js}
這樣做的好處是,可以動態(tài)控制生產(chǎn)環(huán)境是否開啟 mock 且在沒有開啟的時候 mock.js 不會被打包邮丰。
如果代碼直接寫在main.ts內(nèi)，則不管有沒有開啟,最終的打包都會包含mock.js
*/
injectCode: `
import { setupProdMockServer } from './mockProdServer';
setupProdMockServer();
`
})
],
});
};
5铭乾、在tsconfig.json文件中
"include": [ "src/mock/**/*.ts"],
6剪廉、在文件中調(diào)用
例：login/index.vue
...
onMounted(() => {
axios.get('/api/createUser').then((res: any) => {
console.log(res);
});
});
image.png
