vue3+vite2中使用mock

技术栈：vue3+vite2
前言：在vite中使用mock模拟数据，需要借助vite-plugin-mock，分为开发环境和生产环境使用

一、安装vite-plugin-mock

npm i mockjs -D
npm i vite-plugin-mock -D

二、创建test.ts

在src/mock/source文件夹下新建test.ts

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

export default [
  {
    url: '/api/getUserInfo', // 注意，这里只能是string格式
    method: 'get',
    response: () => {
      return 'hello world and get mockData'
    }
  }
] as MockMethod[] // 这里其实就是定义数据格式的，不了解的同学可以参考typescript的官方文档

三、开发环境的配置

如果只需要本地开发环境时使用，配置完此处后直接跳到【五、在页面中使用】即可
在vite.config.ts中进行配置

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

export default defineConfig({
  plugins: [
    viteMockServe({
      mockPath: "./src/mock/source", // 解析，路径可根据实际变动
      localEnabled: true // 此处可以手动设置为true，也可以根据官方文档格式
    })
  ]
})

四、生产环境的配置

如果需要npm run build打包后还能使用，则在开发环境配置的基础上增加以下内容
1、在src/mock下新建index.ts

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

// 逐一导入您的mock.ts文件
// 如果使用vite.mock.config.ts，只需直接导入文件
// 可以使用 import.meta.glob功能来进行全部导入
import testModule from './source/login'

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

2、在main.ts里进行注册

import { setupProdMockServer } from '@/mock';
if (process.env.NODE_ENV === 'production') {
  setupProdMockServer();
}

3、vite.config.ts个人配置

import { resolve } from 'path'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    viteMockServe({
      mockPath: "./src/mock/source", // 解析，路径可根据实际变动
      localEnabled: false, // 开发环境
      prodEnabled: true, // 生产环境设为true，也可以根据官方文档格式
      injectCode: 
      ` import { setupProdMockServer } from './src/mock';
        setupProdMockServer(); `,
      watchFiles: true, // 监听文件内容变更
      injectFile: resolve("src/main.ts"), // 在main.ts注册后需要在此处注入，否则可能报找不到setupProdMockServer的错误
    })
  ]
})

五、在页面中使用

在任意一个vue文件中的挂载生命周期里使用即可

<script lang="ts" setup>
import axios from 'axios';
import { onMounted } from 'vue'

onMounted(() => {
    axios.get("/api/getUserInfo").then(res => { console.log(res); });
})
</script>

六、文件目录结构及其效果展示

七、其他内容补充

个人在vite.config.ts中是使用defineConfig来配置的，所以手动对localEnabled和prodEnabled设置true和false，当然更完善有两种解决方案
1、需要安装 npm install cross-env -D 然后更改打包命令为 "dev": "cross-env USE_MOCK=true vite"，此处不做扩展，有能力的可以尝试下
2、按照官方文档的格式，使用UserConfigExport和ConfigEnv，如下

import { viteMockServe } from 'vite-plugin-mock'
import { UserConfigExport, ConfigEnv } from 'vite'

export default ({ command }: ConfigEnv): UserConfigExport => {
  // 根据项目配置。可以配置在.env文件
  let prodMock = true
  return {
    plugins: [
      viteMockServe({
        mockPath: 'mock',
        localEnabled: command === 'serve',
        prodEnabled: command !== 'serve' && prodMock,
        //  这样可以控制关闭mock的时候不让mock打包到最终代码内
        injectCode: `
          import { setupProdMockServer } from './mockProdServer';
          setupProdMockServer();
        `,
      }),
    ],
  }
}

八、参考链接地址

打包问题解决参考文档：https://blog.csdn.net/sinat_35082096/article/details/124470571
其他思路补充参考文档：https://www.jianshu.com/p/8ce94077af2a
vite-plugin-mock官方文档：https://github.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md