vue中想要mock数据在线上环境生效如何操作

一般情况下，在没有后端配合的时候，我们前端又想模拟接口请求，获得数据，那我们可以选择本地创建json假数据，或者使用mock来模拟请求的过程以及拿到接口返回的结果。

问题
一般情况下，在配置了mock数据之后呢，只能是在本地启动服务器的时候生效，到了部署服务器上面之后，就会发现这个mock数据是没有效果的，那么如何来配置线上环境的mock数据呢

解决方案

做一下几个步骤，按照规定规则来配置即可
第一步
这里我列出了配置mock数据的几个关键的步骤

//	这里vue3自带的mock插件
import {
    
     MockMethod } from "vite-plugin-mock";
// 性别--这里配置的是一个准备返回的mock数据
const sexList = [
  {
    
    
    id: 1111,
    parentId: 0,
    treeLabel: "性别"
  },
  {
    
    
    id: 1,
    parentId: 1111,
    treeLabel: "男"
  },
  {
    
    
    id: 2,
    parentId: 1111,
    treeLabel: "女"
  }
];
//	接下啦需要导出封装的mock请求
export default [
 {
    
    
    url: "/informationEnterTree",
    method: "get",
    response: () => {
    
    
      return {
    
    
        success: true,
        data: informationEnterTree
      };
    }
  },
 ] as MockMethod[];

然后需要再main.ts文件中注册一下

//	这里导入的是我们刚刚在mock文件夹下封装的请求文件夹
 import {
    
     setupProdMockServer } from "../mock/_createProductionServer";
 setupProdMockServer();

最后需要再vite.config.ts文件夹中配置一下插件

import {
    
     viteMockServe } from "vite-plugin-mock";
  plugins: [
      viteMockServe({
    
    
        supportTs: false,
        logger: false,
        prodEnabled: true,
        watchFiles: true,
        mockPath: "./mock/prodMock",
        injectCode: `
            import { setupProdMockServer } from '../mock/_createProductionServer'
            setupProdMockServer()
          `,
        injectFile: resolve("./src/main.ts")
      // })
    ],

到此为止，mock数据就可以在线上环境使用了
再见，再见