关于vue-cli取消dev-server.js后, axios请求本地json文件的配置问题解决

在还没有连接后端时, 前端攻城狮一般需要创建一个本地json,用来虚拟请求数据,完善一些前端的设计和功能实现. 由于vue-cli更新后, 取消了dev-server.js和dev-client.js, 改用webpack.dev.conf.js代替,因此关于express的一些配置改为如下解决方案:

在build/webpack.dev.conf.js文件中, 配置express环境:

//引入node.js中的express模块,简化操作
var express = require('express');
//创建express的开发实例app
var app = express();
//将news.json中的json对象取出存在newsData中
var newsData = require('../mock/news.json');
//将json对象中想要的值取出
var news = newsData.result;

将值取出后, 在 webpack.dev.conf.js的devServer{}对象中使用get/post接口:

GET:

before(app) {
      app.get('/news', function (req, res) {
        res.json({
          data: news
        })
      })
    }

POST:

before(app) {
      app.post('/news', function (req, res) {
        res.json({
          data: news
        })
      })
    }

接下来就可以在前端中使用axios正常调用本地文件了:

fn() {
        axios.get('/news').then((result) => {
          var res = result.data.data.recommend_feeds;
          this.arr = res;
          // console.log(this.arr);
        })
      }