一、安装
|
1 |
npm i -D vite-plugin-mock@3.0.1 |
二、vite.config.ts配置
enable参数控制开发环境开启关闭
|
1 2 3 4 5 |
viteMockServe({ mockPath: './mock', watchFiles: true, enable: false // true-启用 false-停用 }) |
三、添加vite.mock.config.ts
|
1 2 3 4 |
import user from './mock/user' import login from './mock/login' export default [...user, ...login] |
四、修改mock-prod-server.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore import { createProdMockServer } from 'vite-plugin-mock/client' const modules: { [key: string]: { default: object[] } } = import.meta.glob('../../mock/**/*.ts', { eager: true }) const mockModules: object[] = [] Object.keys(modules).forEach(key => { if (key.includes('/_')) { return } mockModules.push(...modules[key].default) }) /** * Used in a production environment. Need to manually import all modules */ export function setupProdMockServer() { createProdMockServer(mockModules) } |
五、修改main.ts
生产环境开启需要在main.ts配置
|
1 2 3 4 5 6 |
// 生产环境使用mock开启：production mock server // if (process.env.NODE_ENV === 'production') { // import('./utils/mock-prod-server').then(({ setupProdMockServer }) => { // setupProdMockServer() // }) // } |
