vue中想要mock數(shù)據(jù)在線上環(huán)境生效如何操作
一般情況下，在沒有后端配合的時(shí)候，我們前端又想模擬接口請(qǐng)求，獲得數(shù)據(jù)，那我們可以選擇本地創(chuàng)建json假數(shù)據(jù)，或者使用mock來模擬請(qǐng)求的過程以及拿到接口返回的結(jié)果。
問題一般情況下，在配置了mock數(shù)據(jù)之后呢，只能是在本地啟動(dòng)服務(wù)器的時(shí)候生效，到了部署服務(wù)器上面之后，就會(huì)發(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請(qǐng)求
export default [
{
url: "/informationEnterTree",
method: "get",
response: () => {
return {
success: true,
data: informationEnterTree
};
}
},
] as MockMethod[];
然后需要再main.ts文件中注冊(cè)一下
// 這里導(dǎo)入的是我們剛剛在mock文件夾下封裝的請(qǐng)求文件夾
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
前端elementUI?select選擇器實(shí)現(xiàn)遠(yuǎn)程搜索
這篇文章主要為大家介紹了前端使用elementUI?select選擇器實(shí)現(xiàn)遠(yuǎn)程搜索，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
使用vite搭建ssr活動(dòng)頁架構(gòu)的實(shí)現(xiàn)
本文主要介紹了使用vite搭建ssr活動(dòng)頁架構(gòu)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue使用自定義指令實(shí)現(xiàn)拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例
本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Vue實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果實(shí)例詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了Vue中使用eslint和prettier格式化代碼方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
最近在學(xué)習(xí)vue的源碼，總結(jié)了幾種vue中父子組件傳遞數(shù)據(jù)的方法。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
Javascript vue.js表格分頁，ajax異步加載數(shù)據(jù)
這篇文章主要介紹了Javascript vue.js表格分頁，ajax異步加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2016-10-10
Vue Components 數(shù)字鍵盤的實(shí)現(xiàn)
這篇文章主要介紹了Vue Components 數(shù)字鍵盤的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Element-UI的el-table組件是一個(gè)非常強(qiáng)大的表格組件,它提供了多種常見的表格功能,如排序、篩選、分頁、自定義列模板等,這篇文章主要給大家介紹了關(guān)于element-ui?el-table表格固定表頭的相關(guān)資料,需要的朋友可以參考下2024-05-05