---
title: vite-plugin-mock
tags: vue
---

# 新增套件

npm i -D vite-plugin-mock

# 加入設定

export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
  const root = process.cwd();
  const { VITE_PORT } = loadEnv(mode, root);
  return {
    root,
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock',
        localEnabled: true,
        logger: false,
      }),
    ],
    server: {
      host: false,
      port: +VITE_PORT,
      https: false,
      open: false,
    },
  };
});

# 加入mock資料夾

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

const abc1: MockMethod = {
  url: '/api/abc1',
  method: 'get',
  response: (query) => {
    return {
      code: 0,
      data: {
        abc: '123',
      },
    };
  },
};

const abc2: MockMethod = {
  url: '/api/abc2',
  method: 'get',
  response: (query) => {
    return {
      code: 0,
      data: {
        abc: '456',
      },
    };
  },
};

export default [abc1, abc2];