Mockjs

配置项解释

这个配置使用了 vite-plugin-mock 插件来简化 Mock.js 的集成，具体配置项如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


viteMockServe({
  mockPath: "mock",
  localEnabled: true,
  prodEnabled: false,
  injectCode: `
    import { setupProdMockServer } from './mock/mockProdServer';
    setupProdMockServer();
  `,
  logger: false
})

mockPath:
- mockPath: "mock"：指定存放 Mock 数据的目录。这里指定为 "mock"，表示 Mock 数据文件放在项目根目录下的 mock 文件夹内。
localEnabled:
- localEnabled: true：在本地开发环境中启用 Mock 数据。true 表示总是启用 Mock 数据，不需要根据 command 来判断。
prodEnabled:
- prodEnabled: false：在生产环境中禁用 Mock 数据。false 表示即使在生产环境也不会启用 Mock 数据。
injectCode:
- injectCode: ...：在打包后自动注入到入口文件中的代码。用于在生产环境中手动设置 Mock 数据。
- 具体代码为：
  1 2
  
  import { setupProdMockServer } from './mock/mockProdServer'; setupProdMockServer();
  这段代码会在项目启动时执行 setupProdMockServer 方法，设置生产环境中的 Mock 数据。
logger:
- logger: false：关闭日志输出。false 表示插件运行时不会输出日志信息，减少控制台输出内容。

使用示例

以下是一个完整的 vite.config.ts 文件示例，展示了如何使用 vite-plugin-mock 插件：

 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
26
27
28


import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteMockServe } from 'vite-plugin-mock';

export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: "mock",
      localEnabled: true,
      prodEnabled: false,
      injectCode: `
        import { setupProdMockServer } from './mock/mockProdServer';
        setupProdMockServer();
      `,
      logger: false
    })
  ],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 你的后端服务地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

`mock` 目录示例

假设 mock 文件夹包含以下文件：

src/mock/index.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
26
27
28
29
30
31
32


import { MockMethod } from 'vite-plugin-mock';

export default [
  {
    url: '/api/login',
    method: 'post',
    response: () => {
      return {
        code: 200,
        message: '登录成功',
        data: {
          token: '1234567890abcdef'
        }
      };
    }
  },
  {
    url: '/api/user/info',
    method: 'get',
    response: () => {
      return {
        code: 200,
        message: '获取用户信息成功',
        data: {
          id: 1,
          username: 'admin',
          role: 'admin'
        }
      };
    }
  }
] as MockMethod[];

src/mock/mockProdServer.ts：

1
2
3
4
5
6


import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
import mockModules from './index';

export function setupProdMockServer() {
  createProdMockServer(mockModules);
}

解释

mockPath 指定了 Mock 数据文件存放的目录。
localEnabled: true 表示始终在本地开发环境中启用 Mock 数据。
prodEnabled: false 表示在生产环境中不启用 Mock 数据。
injectCode 用于在项目启动时，自动注入设置 Mock 服务器的代码。
logger: false 表示关闭插件的日志输出，减少控制台输出内容。

通过这种配置方式，你可以在本地开发环境中使用 Mock 数据，而在生产环境中禁用 Mock 数据，确保开发和生产环境的行为一致。

配置项解释

使用示例

mock 目录示例

解释

`mock` 目录示例