現在的vue裏dev-server.js被替換成了webpack-dev-conf.js,以下分爲本地後臺數據和線上數據抓取兩種情況。
數據抓取
首先
const axios = require('axios')
const express = require("express")
const app = express()
其次,找到:devServer
在裏面加上before方法,下面的before(app){ ... }就是例子
devServer: {
before(app){
app.get('/api/getDiscList', function (req, res) {
var url = 'Url地址'
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
console.log(“success”);
res.json(response.data)
}).catch((e) => {
console.log(e)
})
})
},
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [{
from: /.*/,
to: path.posix.join(config.dev.assetsPublicPath, 'index.html')
}, ],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay ? {
warnings: false,
errors: true
} : false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}
},
本地數據(大致同上面一樣)
第一步
const express = require('express')
const app = express()//請求server
var appData = require('../data.json')//加載本地數據文件
var seller = appData.seller//獲取對應的本地數據
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)//通過路由請求數據
第二步:找到devServer,在裏面加上before()
before(app) {
app.get('/api/seller', (req, res) => {
res.json({
errno: 0,
data: seller
})//接口返回json數據,上面配置的數據seller就賦值給data請求後調用
}),
app.get('/api/goods', (req, res) => {
res.json({
errno: 0,
data: goods
})
}),
app.get('/api/ratings', (req, res) => {
res.json({
errno: 0,
data: ratings
})
})
}