vue-cli中mock本地json数据踩雷：报错404 （GET http://localhost:8080/goods 404 (Not Found) ）

标题vue-cli中mock本地json数据踩雷：报错404

运用vue的脚手架进行了项目的搭建，想要通过json文件模拟后台传输数据，结果一直报错：404，经过不断的查找资料和调试终于找到问题的所在。

想通过本地的json文件进行数据的请求，首先要建立一个goods.json的文件，进行数据储存。

{
  "status":"0",
  "msg":"",
  "result":[
    {
        "productId":"10001",
        "productName":"小米6",
        "prodcutPrice":"2499",
        "prodcutImg":"mi6.jpg"
    }
  ]
}

新版本的vue项目中已经将dev-server，dev-client和webpack-dev-conf合并在一起了。
所以我们要在webpac-dev-conf进行配置
配置代码如下：

const express = require('express')
const app = express()
var goodsData = require('../mock/goods.json')//请求数据的位置
var router = express.Router()
before(app) {
      router.get("/goods", function (req,res) {
                  res.json(goodsData)
                })
                app.use(router)
         },

注意：before中的代码要写在devServer中

具体位置如图所示：

vue页面中进行请求的代码如下所示：

data(){
      return {
        goodsList:[],
       
    },
    mounted:function(){
      this.getGoodsList();
    },
    methods:{
      getGoodsList(){
        axios.get('/goods').then((result)=>{
          var res=result.data;
          this.goodsList=res.result;
        });
      }
    }
  }

以上就成功的通过本地json文件完成了数据请求。