vue-cli项目中获取自定义mock文件中的json数据

       最近在看一个比较先前版的vue小项目，其中就提到了自定义mock文件中数据的获取，这时就需要对build文件中的dev-server.js文件进行配置。但是新版的vue-cli中并没有dev-server.js这个文件，而是被build文件下的webpack-dev-conf.js代替了。那么在进行后台数据模拟的时候，我们也要进行一些相应的配置修改。

1.首先创建一个mock文件，在里面创建一个保存数据的.json文件，如图：

这是goods.json文件中自定义的一些数据

{
   "status":"0",
   "msg":"",
   "result":[
   {
      "productId":"100001",
      "productName":"小米6",
      "productPrice":2499,
      "productImg":"1.jpg"
   },
     {
       "productId":"100001",
       "productName":"xxx",
       "productPrice":200,
       "productImg":"2.jpg"
     }
     ]

2.进行webpack-dev-conf.js文件的配置：

       在webpack-dev-conf.js中找到 const portfinder = require('portfinder')，然后在后面添加如下代码：

const express = require('express')
const app = express()
const goods = require('../mock/goods.json') // 文章列表数据源
const routes = express.Router()
app.use('/api', routes)

然后在devServer的最后添加如下代码：

before(app) {
      app.get('/api/goods', (req, res) => {
        res.json(goods);
      })
    }

在浏览器中输入 http://localhost:8080/api/goods测试能否拿到数据：

3.安装axios插件

npm install axios --save

4.使用axios插件，成功获取数据

 import axios from "axios"


 methods:{
           getGoodsList(){
               axios.get("http://localhost:8080/api/goods").then((res)=>{
                  console.log(res.data);
               })
           }
        }

上述过程主要注意路径问题，一般错误就是路径不对，打印出现错误404.当然现在还有mockjs神器，就避免要手动输入数据，更加方面数据的模拟。