全域性安裝json-server

npm install json-server -g

在專案目錄下建立mock資料夾,並在資料夾下建立db.json檔案

檔案格式如下:

{
    "slides": [{
        "src": "/static/img/right1.png",
        "title": "xxx1",
        "href": "#"
    }, {
        "src": "/static/img/right2.png",
        "title": "xxx2",
        "href": "#"
    }, {
        "src
 
": "/static/img/right3.png",
        "title": "xxx2",
        "href": "#"
    }, {
        "src": "/static/img/right4.png",
        "title": "xxx2",
        "href": "#"
    }],
    "list": [{
        "id": 1,
        "url": "#",
        "title": "文藝"
    }, {
        "id": 2,
        "url": "#",
        "title
 
": "經管"
    }, {
        "id": 3,
        "url": "#",
        "title": "社科"
    }]
}

找到package.json資料夾,寫入兩個命令:

"mock": "json-server --watch mock/db.json",
 "mockdev": "npm run mock & npm run dev"

我這裡只寫了一個,其實一個兩個都可以,寫兩個直接可以兩條命令一起執行
如果執行npm run mockdev 時一直處於監聽db.json的狀態,建議使用兩條命令分開在兩個命令列中執行,可避免

在config/index.js中設定代理:

proxyTable:{
    '/api/': {
         target: 'http://localhost:3000',
         changeOrigin: true,
         pathRewrite: {
             '^/api/': ''
         }
     }
}

注意:如果此時你的服務已經開了(已經npm run dev 了),需重新啟動服務

在設定代理之前,可以先進行測試,看是否可以啟動mock伺服器

執行npm run mock 之後訪問 ,頁面中存在json物件並可訪問即可

頁面中可採用axios進行資料的請求

,例:

本篇部落格借鑑部落格,裡面有詳細的更多的解決方案.嘿嘿!