vue中想要mock數據在線上環(huán)境生效如何操作
更新時間：2025年01月13日 10:56:20 作者：孫懟懟啊
本文主要介紹了在配置了mock數據之后在線上環(huán)境使用,主要通過在main.ts文件中注冊和vite.config.ts文件夾中配置插件來實現,感興趣的可以了解一下
一般情況下，在沒有后端配合的時候，我們前端又想模擬接口請求，獲得數據，那我們可以選擇本地創(chuàng)建json假數據，或者使用mock來模擬請求的過程以及拿到接口返回的結果。
問題一般情況下，在配置了mock數據之后呢，只能是在本地啟動服務器的時候生效，到了部署服務器上面之后，就會發(fā)現這個mock數據是沒有效果的，那么如何來配置線上環(huán)境的mock數據呢
解決方案
做一下幾個步驟，按照規(guī)定規(guī)則來配置即可第一步這里我列出了配置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數據就可以在線上環(huán)境使用了,更多相關vue mock線上環(huán)境操作內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了前端使用elementUI?select選擇器實現遠程搜索，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
本文主要介紹了使用vite搭建ssr活動頁架構，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要為大家詳細介紹了vue使用自定義指令實現拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
本篇文章主要介紹了vue實現登陸登出的實現示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了Vue實現星級評價效果的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了Vue中使用eslint和prettier格式化代碼方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
最近在學習vue的源碼，總結了幾種vue中父子組件傳遞數據的方法。具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
Javascript vue.js表格分頁，ajax異步加載數據
這篇文章主要介紹了Javascript vue.js表格分頁，ajax異步加載數據的相關資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了Vue Components 數字鍵盤的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
Element-UI的el-table組件是一個非常強大的表格組件,它提供了多種常見的表格功能,如排序、篩選、分頁、自定義列模板等,這篇文章主要給大家介紹了關于element-ui?el-table表格固定表頭的相關資料,需要的朋友可以參考下2024-05-05