快捷導(dǎo)航

vue中想要mock數(shù)據(jù)在線上環(huán)境生效如何操作

更新時(shí)間：2025年01月13日 10:56:20 作者：孫懟懟啊

本文主要介紹了在配置了mock數(shù)據(jù)之后在線上環(huán)境使用,主要通過在main.ts文件中注冊和vite.config.ts文件夾中配置插件來實(shí)現(xiàn),感興趣的可以了解一下

問題一般情況下，在配置了mock數(shù)據(jù)之后呢，只能是在本地啟動(dòng)服務(wù)器的時(shí)候生效，到了部署服務(wù)器上面之后，就會發(fā)現(xiàn)這個(gè)mock數(shù)據(jù)是沒有效果的，那么如何來配置線上環(huán)境的mock數(shù)據(jù)呢

解決方案

做一下幾個(gè)步驟，按照規(guī)定規(guī)則來配置即可第一步這里我列出了配置mock數(shù)據(jù)的幾個(gè)關(guān)鍵的步驟

在這里插入圖片描述

//	這里vue3自帶的mock插件
import { MockMethod } from "vite-plugin-mock";
// 性別--這里配置的是一個(gè)準(zhǔn)備返回的mock數(shù)據(jù)
const sexList = [
  {
    id: 1111,
    parentId: 0,
    treeLabel: "性別"
  },
  {
    id: 1,
    parentId: 1111,
    treeLabel: "男"
  },
  {
    id: 2,
    parentId: 1111,
    treeLabel: "女"
  }
];
//	接下啦需要導(dǎo)出封裝的mock請求
export default [
 {
    url: "/informationEnterTree",
    method: "get",
    response: () => {
      return {
        success: true,
        data: informationEnterTree
      };
    }
  },
 ] as MockMethod[];

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

//	這里導(dǎo)入的是我們剛剛在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數(shù)據(jù)就可以在線上環(huán)境使用了,更多相關(guān)vue mock線上環(huán)境操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: