ts+vite+vite-plugin-mock使用避坑

安装：

vite-plugin-mock版本我这里使用的是2.9.6，版本比较稳定，其它版本可能会出现问题，推荐使用此版本
pnpm install -D vite-plugin-mock@2.9.6 mockjs

配置文件

在项目根目录下创建mock文件夹，并同时创建index.ts与user.ts文件

user.ts文件：

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

export default [
    // 用户登录接口
    {
        url: '/api/user/login', //请求地址
        method: 'post', //请求方式
        response: ({ body }) => {
            return { code: 200, data: body }
        },
    },
] as MockMethod[]

index.ts文件

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'

// Import your mock .ts files one by one
// If you use vite.mock.config.ts, just import the file directly
// You can use the import.meta.glob function to import all
import MockMethod from './user'

export function setupProdMockServer() {
  createProdMockServer([...MockMethod])
}

vite.config.ts文件配置及接口404可能的问题

注：该配置项中，localEnabled配置项，从官方文档和百度上都是写的command === 'serve'但是这样写，不但编辑器报错，而且请求/api/user/login也报错404，准备放弃的时候，删除localEnabled这行配置项保存时，接口返回正常，再尝试打印command参数，情况如下：

{ mode: 'development', command: 'serve', ssrBuild: false }

从返回中看，command是一个对象，修改为command.command === 'serve'后，接口访问正常

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

export default defineConfig((command) => {
    return {
        plugins: [
            vue(),
            viteMockServe({
                // mockPath: "mock",
                localEnabled: command.command === 'serve',  // 开发打包开关
                prodEnabled: command.command !== 'serve', // 生产打包开关
                supportTs: true, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
                watchFiles: true, // 监视文件更改
                //这样可以控制关闭mock的时候不让mock打包到最终代码内
                injectCode: `
                    import { setupProdMockServer } from '../mock';
                    setupProdMockServer();
                `,
            }),
        ]
    }
})

访问接口

import axios from 'axios'
axios({
    url: '/api/user/login',
    method: 'post',
    data: {
        username: 'admin',
        password: '123456',
    },
})