1、插件安装
npm install mockjs vite-plugin-mock -D
2、添加mock目录及其文件
新建文件/src/mock/user.ts
import { MockMethod } from 'vite-plugin-mock';
// 单纯的使⽤⾃⼰的返回数据话，可以不⽤引⼊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、在项目根文件夹下创建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数据
import { viteMockServe } from 'vite-plugin-mock';
// https://vitejs.dev/config/
export default ({ mode, command }) => {
const prodMock = false;
return defineConfig({
plugins: [
...
viteMockServe({
mockPath: './src/mock', // 设置模拟.ts 文件的存储文件夹
localEnabled: command === 'serve', // 设置是否启用本地 xxx.ts 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能
prodEnabled: command !== 'serve' && prodMock, // 设置打包是否启用 mock 功能
supportTs: true, // 打开后，可以读取 ts ⽂件模块。请注意，打开后将⽆法监视.js ⽂件。
watchFiles: true, // 监视⽂件更改，并重新加载 mock 数据
/* 如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}
这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。
如果代码直接写在main.ts内，则不管有没有开启,最终的打包都会包含mock.js
*/
injectCode: `
import { setupProdMockServer } from './mockProdServer';
setupProdMockServer();
`
})
],
});
};
5、在tsconfig.json文件中
"include": [ "src/mock/**/*.ts"],
6、在文件中调用
例：login/index.vue
...
onMounted(() => {
axios.get('/api/createUser').then((res: any) => {
console.log(res);
});
});
image.png
