參考文章：
1.https://blog.csdn.net/qq_34645412/article/details/78833860
2.https://blog.csdn.net/benben513624/article/details/78562529
3.https://blog.csdn.net/weixin_39728230/article/details/80293892
正文：
1.修改build/webpack.dev.conf.js文件卫枝。（接口路徑為根目錄憾筏，接口文件名為db.json）

//(1),在頭部引用express
var express = require('express')

//(2),配置express server
var apiServer = express()
var bodyParser = require('body-parser')
apiServer.use(bodyParser.urlencoded({ extended: true }))
apiServer.use(bodyParser.json())
var apiRouter = express.Router()
var fs = require('fs')
apiRouter.route('/:apiName') //接口路徑
.all(function (req, res) {
  fs.readFile('./db.json', 'utf8', function (err, data) { //讀取接口文件，db.json是接口文件名
    if(err) throw err
    var data = JSON.parse(data)
    if(data[req.params.apiName]) {
      res.json(data[req.params.apiName])
    } else {
      res.send('no such api name')
    }
  })
})
apiServer.use('/api', apiRouter);
apiServer.listen(3000, function (err) {
  if (err) {
    console.log(err)
    return
  }
  console.log('Listening at http://localhost:' + 3000 + '\n')
})

2.修改config/index.js文件。因為代碼的服務端接口是8080透典，接口文件的服務端端口是3000，為了解決這個問題需要做一個服務端代理的配置泻骤。

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    //配置轉化：從3000 => 8080
    //這下面就是要加的代碼ＮХ省！Ｆ怕Ｅ履ァ喂饥！
    proxyTable:{
      '/api':'http://localhost:3000/'
    },
    
    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  }

3.將接口文件db.json放到vue項目的根目錄下。

//db.json
{
    "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廣告發(fā)布",
        "url": "http://hearstone.com"
        }
    ]
}

4.調(diào)用接口文件肠鲫。

axios({ // 用axios發(fā)送post請求
    method: 'post',
    url: '/api/getNewsList', // 請求地址
}).then(function(res){ // 處理返回的文件流
    console.log(res.data);
    alert('成功了');
}).catch(function (code) {
    alert('失敗了');
    console.log(code);
});