快捷導(dǎo)航

vue-element-admin如何從mock數(shù)據(jù)過(guò)渡到使用后臺(tái)接口

更新時(shí)間：2023年04月25日 08:45:02 作者：YKenan

這篇文章主要介紹了vue-element-admin如何從mock數(shù)據(jù)過(guò)渡到使用后臺(tái)接口問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

1. 移除 mock

修改 vue.config.js 文件

1. 首先將 before: require("./mock/mock-server.js") 注釋掉
2. 添加一下內(nèi)容

    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://192.168.81.129:${port}`,
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: ""
        }
      }
      // "/api": {
      //   target: `http://192.168.81.129:${port}`,
      //   changeOrigin: true,
      //   pathRewrite: {
      //     "^/api": ""
      //   }
      // }
    }

修改 src/main.js 文件

2. 替換 mock 為后臺(tái)接口請(qǐng)求

修改 src/api/*.js 文件

3. 補(bǔ)全請(qǐng)求，狀態(tài)參數(shù)

改動(dòng)變量，.env.development 文件

修改 src/utils/request.js 文件

刪除 mock 文件夾

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談webpack編譯vue項(xiàng)目生成的代碼探索
本篇文章主要介紹了淺談webpack編譯vue項(xiàng)目生成的代碼探索，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
淺談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法
下面小編就為大家?guī)?lái)一篇淺談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
淺談Vue組件單元測(cè)試究竟測(cè)試什么
這篇文章主要介紹了淺談Vue組件單元測(cè)試究竟測(cè)試什么，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
vue 之 .sync 修飾符示例詳解
這篇文章主要介紹了vue 之 .sync 修飾符的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-04-04
Vue3.0監(jiān)聽(tīng)器watch與watchEffect詳解
在 Vue 3 中,watch 仍然是一種用于監(jiān)聽(tīng)數(shù)據(jù)變化并執(zhí)行相應(yīng)操作的方式,不過(guò)在組合式 API 中,watch 的使用方式與選項(xiàng)式 API 略有不同,這篇文章主要介紹了Vue3.0監(jiān)聽(tīng)器watch與watchEffect,需要的朋友可以參考下
2023-12-12
在vue中封裝方法以及多處引用該方法詳解
這篇文章主要介紹了在vue中封裝方法以及多處引用該方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
vue導(dǎo)出報(bào)表至excel表格三種方式
這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出報(bào)表至excel表格的三種方式,導(dǎo)出報(bào)表是實(shí)際開(kāi)發(fā)的常見(jiàn)功能,前后端都可以實(shí)現(xiàn)表格導(dǎo)出,本文介紹的是用vue實(shí)現(xiàn),需要的朋友可以參考下
2023-09-09
vue elementUI table 自定義表頭和行合并的實(shí)例代碼
這篇文章主要介紹了vue elementUI table 自定義表頭和行合并的實(shí)例代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
關(guān)于console.log打印結(jié)果是?[object?Object]的解決
這篇文章主要介紹了關(guān)于console.log打印結(jié)果是?[object?Object]的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
如何在Vue3中實(shí)現(xiàn)文件上傳功能結(jié)合后端API
文件上傳的功能實(shí)現(xiàn)是我們做Web應(yīng)用時(shí)候最為常見(jiàn)的應(yīng)用場(chǎng)景,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中實(shí)現(xiàn)文件上傳功能結(jié)合后端API的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09