首先在项目中安装 mockjs和 vite-plugin-mock

npm i mockjs vite-plugin-mock

开发环境

1. 根目录新建mock文件夹，内部创建index.js，写入以下内容
   mock规则可参考mockjs介绍总结

export default [
    {
        url: "/api/yujing/sisetu",
        method: "get",
        response: () => {
            return {
                code: 0,
                message: "ok",
                'data|12': [{
                    warnBl: 0,// 预警占比
                    'warnLevel|0-3': 0,// 预警等级
                    'warnNum|0-100': 0,// 预警数量
                    'warnTotal|0-100': 0,// 报警数量
                }]
            }
        }
    }
]

2. 修改vite.config.js，如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig({
   plugins: [
     vue(),
     viteMockServe({// 更多配置见最下方
       supportTs: true,
       logger: false,
       mockPath: "./mock/" // 文件位置
     })
   ]
 })
// vite.config.js 

3. 然后就可以使用了
   别忘了装axios

import axios from 'axios'
axios.get("/api/yujing/sisetu").then((res) => {
	console.log(res);
});

4. 请求成功
   

生产（线上）环境使用

如果不配置，请求都会变成404

1. 在src中新建文件mockProdServer.js，写入以下内容

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

// 逐一导入您的mock.js文件
// 如果使用vite.mock.config.js，只需直接导入文件
// 可以使用 import.meta.glob功能来进行全部导入
import index from '../mock/index'
export function setupProdMockServer() {
  createProdMockServer([...index])
}

2.修改vite.config.js，如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig({
   plugins: [
     vue(),
     viteMockServe({// 更多配置见最下方
     	mockPath: "./mock/", //mock文件地址 
     	localEnabled: false, // 开发打包开关 
     	prodEnabled: true, // 生产打包开关 // 这样可以控制关闭mock的时候不让mock打包到最终代码内 
     	injectCode: ` import { setupProdMockServer } from './mockProdServer'; setupProdMockServer(); `, 
     	logger: false, //是否在控制台显示请求日志 
     	supportTs: false //打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件 
     })
   ]
 })

3. 打包

    npm run build
   

4.上传至服务器
请求成功

viteMockServe配置项介绍

{
    mockPath?: string;
    supportTs?: boolean;
    ignore?: RegExp | ((fileName: string) => boolean);
    watchFiles?: boolean;
    localEnabled?: boolean;
    ignoreFiles?: string[];
    configPath?: string;
    prodEnabled?: boolean;
    injectFile?: string;
    injectCode?: string;
    logger?:boolean;
}

mockPath

type: string
default: mock
设置模拟.ts 文件的存储文件夹
如果watchFiles：true，将监视文件夹中的文件更改。 并实时同步到请求结果
如果 configPath 具有值，则无效

supportTs

type: boolean
default: true
打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。

ignore

type: RegExp | ((fileName: string) => boolean);
default: undefined
自动读取模拟.ts 文件时，请忽略指定格式的文件

watchFiles

type: boolean
default: true
设置是否监视mockPath对应的文件夹内文件中的更改

localEnabled

type: boolean
default: command === 'serve'
设置是否启用本地 xxx.ts 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能

prodEnabled

type: boolean
default: command !== 'serve'
设置打包是否启用 mock 功能

injectCode

type: string
default: ''
如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}
这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。
如果代码直接写在main.ts内，则不管有没有开启,最终的打包都会包含mock.js

injectFile

type: string
default: path.resolve(process.cwd(), 'src/main.{ts,js}')
injectCode代码注入的文件,默认为项目根目录下src/main.{ts,js}

configPath

type: string
default: vite.mock.config.ts
设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时，将首先读取并使用该文件。 配置文件返回一个数组

logger

type: boolean
default: true
是否在控制台显示请求日志