第一步：在build文件夾下找到webpack.dev.conf.js文件，在const portfinder = require(‘portfinder‘)後添加

//第一步
const express = require(‘express‘)
const app = express()
const appData = require(‘../test.json‘) // 加載本地json文件
const user=appData.user // 獲取對應本地user數據
const login=appData.login;// 獲取對應本地login數據
const notice=appData.notice;// 獲取對應本地notice數據

然後找到devServer，插入以下代碼：

before (app) {
app.get(‘/api/user‘,(reg,res) => {
res.json({
errno: 0,
data:user
}) // 接口返回json數據，上面配置的數據user就復制給data請求後調用

}),

app.post(‘/api/login‘,(reg,res) => {
res.json({
errno: 0,
data: login
}) // 接口返回json數據，上面配置的數據login就復制給data請求後調用
}),
app.get(‘/api/notice‘,(reg,res) => {
res.json({
errno: 0,
data:notice
}) // 接口返回json數據，上面配置的數據notice就復制給data請求後調用
})
}

以下是我的本地json數據結構

{
"user":[
{
"pageNum": "1",
"block_title": "1.下列物質中不屬於外源性致熱原的為（）",
"option": [
{
"item": "A.緊固件毒素"
},
{
"item": "B.方法梵蒂岡毒素"
},
{
"item": "C.方法梵蒂岡毒素"
},
{
"item": "D.方法梵蒂岡毒素"
}
],
"no":"1-50",
"id": "1"
},
{
"pageNum": "2",
"block_title": "2.下列物質中不屬於外源性致熱原的為（）",
"option": [
{
"item": "A.緊固件毒素"
},
{
"item": "B.方法梵蒂岡毒素"
},
{
"item": "C.方法梵蒂岡毒素"
},
{
"item": "D.方法梵蒂岡毒素"
}
],
"no":"51-100",
"id": "2"
},
{
"pageNum": "3",
"block_title": "3.下列物質中不屬於外源性致熱原的為（）",
"option": [
{
"item": "A.緊固件毒素"
},
{
"item": "B.方法梵蒂岡毒素"
},
{
"item": "C.方法梵蒂岡毒素"
},
{
"item": "D.方法梵蒂岡毒素"
}
],
"no":"101-150",
"id": "3"
},
{
"pageNum": "4",
"block_title": "4.下列物質中不屬於外源性致熱原的為（）",
"option": [
{
"item": "A.緊固件毒素"
},
{
"item": "B.方法梵蒂岡毒素"
},
{
"item": "C.方法梵蒂岡毒素"
},
{
"item": "D.方法梵蒂岡毒素"
}
],
"no":"151-200",
"id": "4"
},
{
"pageNum": "5",
"block_title": "5.下列物質中不屬於外源性致熱原的為（）",
"option": [
{
"item": "A.緊固件毒素"
},
{
"item": "B.方法梵蒂岡毒素"
},
{
"item": "C.方法梵蒂岡毒素"
},
{
"item": "D.方法梵蒂岡毒素"
}
],
"no":"201-250",
"id": "5"
},
{
"pageNum": "6",
"block_title": "6.下列物質中不屬於外源性致熱原的為（）",
"option": [
{
"item": "A.緊固件毒素"
},
{
"item": "B.方法梵蒂岡毒素"
},
{
"item": "C.方法梵蒂岡毒素"
},
{
"item": "D.方法梵蒂岡毒素"
}
],
"no":"251-300",
"id": "6"
}

],
"login": {
"username": "李易峰",
"surname": "lyf",
"sex": "男",
"QQ": "99999999991",
"tel": "6666666661",
"id": "1",
"password": "1234561"
},
"notice": {
"notice": [
{
"id": "1",
"title1": "2018年萬國教育真題解析班已開課1"
},
{
"id": "2",
"title1": "2018年萬國教育真題解析班已開課2"
},
{
"id": "3",
"title1": "2018年萬國教育真題解析班已開課3"
}
],
"news": [
{
"id": "1",
"title1": "新聞萬國教育真題解析班已開課1"
},
{
"id": "2",
"title1": "新聞萬國教育真題解析班已開課2"
},
{
"id": "3",
"title1": "新聞萬國教育真題解析班已開課3"
}
]

}
}

請求訪問本地json數據：

const ERR_OK=0
export default{
data(){
return{
userinfo:[],
}
},
methods:{
info:function(){
this.$http.get(‘/api/notice‘).then((res)=>{
res=res.body; // 獲取到數據
if (res.errno === ERR_OK) {
this.userinfo=res.data;
console.log(this.userinfo);
}
})
}

},

mounted(){
this.info();
}

}

vue配置 請求本地json數據