關於vue-cli取消dev-server.js後, axios請求本地json檔案的配置問題解決
阿新 • • 發佈:2019-01-24
在還沒有連線後端時, 前端攻城獅一般需要建立一個本地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);
})
}