有時候我們沒有後臺介面請求檔案，那麼我們可以自己在專案根目錄下模擬json資料檔案，然後通過請求這個檔案來渲染我們的元件。

1、配置build/webpack.dev.conf.js檔案

1.1、在const devWebpackConfig = merge(baseWebpackConfig, {...........}這個配置項前面新增：

// 增加express
const express = require('express')
const app = express()
//載入專案根目錄下模擬的本地json資料檔案
var appData = require('../singerData.json'
 
)  //獲取本地資料json物件
var dataRoutes = express.Router()
// ’/localdata’是自定義的字首路徑
app.use('/localdata', dataRoutes)  

1.2、在devServer配置項的最前面新增：

//增加路由規則before
before(app) {
      app.get('/localdata/singers', (req, res) => {  //注意這裡的路徑就是後面axios請求的路徑名
        res.json({   //自定義請求返回的物件屬性
          code: 0,
          datas:
 
 appData
        })
      })
    }

注意：修改了配置檔案記得重新編譯打包： npm run dev

2、在任意元件中使用axios來請求本地json資料檔案

這裡為訪問本地模擬的json資料，url路徑要和配置檔案中的路徑一致。

      this.$ajax({
        method: 'get',
        url: '/localdata/singers' //url路徑要和配置檔案中的路徑一致
      })
      .then(function (res) {
        console.log(res)
      }
 
)
      .catch(function (error) {
        console.log(error)
      })