在使用vue-cli開發專案時，無論後臺介面是否開發完成，我們都可以自己使用本地json資料用於模擬，但這些json資料要作為介面開發，json server 作為模擬工具就提供了這樣的功能，並且使用十分方便。

前提：已經使用vue-cli搭建好了專案

1、全域性安裝json-server

npm install json-server -g
或使用
cnpm install json-server -g

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

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

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

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

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

主要是為了將請求對映到http://localhost:3000

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

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

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

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

這樣我們就實現了專案用npm run dev啟動，而json資料使用npm run mock啟動（mock伺服器用於模擬後臺介面請求）

最後：我們就可以使用vue的axios進行資料請求啦

axios({
           url:'/api/table',//api 代理到json檔案地址，後面的字尾是檔案中的物件或者是陣列
           method:'get',//請求方式
           //這裡可以新增axios文件中的各種配置
        }).then(function (res) {
          console.log(res,'成功');
        }).catch(function (err) {
          console.log(err,'錯誤');
        })