第一步：在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数据
原文地址：https://www.cnblogs.com/stylesu/p/9120158.html