1. 程式人生 > >關於vue-cli取消dev-server.js後, axios請求本地json檔案的配置問題解決

關於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);
        })
      }