• 第一步：安裝json-server  cnpm install json-server --save
• 第二步：在bulid目錄下找到webpack.dev.conf.js

• 第三步：在const portfinder = require(‘portfinder’)後新增

//第一步
const express = require('express')
const app = express()//請求server
var appData = require('../data.json')//載入本地資料檔案
var getNewsList = appData.getNewsList//獲取對應的本地資料
var login = appData.login
var getPrice = appData.getPrice
var getOrderList = appData.getOrderList
var createOrder = appData.createOrder
var apiRoutes = express.Router()
app.use('/api', apiRoutes)//通過路由請求資料
 

• 第四步：找到devServer,在裡面加上before（）方法

//第二步找到devServer,在裡面新增
    before(app) {
      app.get('/api/getNewsList', (req, res) => {
        res.json({
          errno: 0,
          data: getNewsList
        })//介面返回json資料，上面配置的資料seller就賦值給data請求後呼叫
      }),
      app.get('/api/login', (req, res) => {
        res.json({
          errno: 0,
          data: login
        })
      }),
      app.get('/api/getPrice', (req, res) => {
        res.json({
          errno: 0,
          data: getPrice
        })
      }),
      app.get('/api/createOrder', (req, res) => {
        res.json({
          errno: 0,
          data: createOrder
        })
      }),
      app.get('/api/getOrderList', (req, res) => {
        res.json({
          errno: 0,
          data: getOrderList
        })
      })
    }
 

• 第五步：提供一data.json資料（data.json如果沒有資料，會報錯This is probably not a problem with npm. There is likely additional logging output above.）

{
    "getNewsList": [
      {
        "id": 1,
        "title": "新聞條目1新聞條目1新聞條目1新聞條目1",
        "url": "http://starcraft.com"
      },
      {
        "id": 2,
        "title": "新聞條目2新聞條目2新聞條目2新聞條目2",
        "url": "http://warcraft.com"
      },
      {
        "id": 3,
        "title": "新聞條3新聞條3新聞條3",
        "url": "http://overwatch.com"
      },
      {
        "id": 4,
        "title": "新聞條4廣告發布",
        "url": "http://hearstone.com"
      }
    ],
    "login": {
      "username": "yudongdong",
      "userId": 123123
    },
    "getPrice": {
      "amount": 678
    },
    "createOrder": {
      "orderId": "6djk979"
    },
    "getOrderList": {
      "list": [
        {
          "orderId": "ddj123",
          "product": "資料統計",
          "version": "高階版",
          "period": "1年",
          "buyNum": 2,
          "date": "2016-10-10",
          "amount": "500元"
        },
        {
          "orderId": "yuj583",
          "product": "流量分析",
          "version": "戶外版",
          "period": "3個月",
          "buyNum": 1,
          "date": "2016-5-2",
          "amount": "2200元"
        },
        {
          "orderId": "pmd201",
          "product": "廣告發布",
          "version": "商鋪版",
          "period": "3年",
          "buyNum": 12,
          "date": "2016-8-3",
          "amount": "7890元"
        }
      ]
    }
  }