vue-cli 3 无法访问本地mock测试数据

Question

问题描述

vue-cli 3 无法访问本地mock数据。在本地vue项目，新建了mock文件夹，存放测试数据，想通过axios访问。配置了vue.config.js文件，但是在vue文件中访问的时候，报了404的错误。

问题出现的环境背景及自己尝试过哪些方法

vue-cli3项目，目录结构如下：

为什么有两个mock文件夹呢，因为有人说只有static下面的文件能访问到，测试后还是不行。

相关代码

// vue.config.js配置，设置了路径名为/goods
const goodList = require("./mock/goods.json");
 
module.exports = {
  devServer: {
    port: 8080,
    before(app) {
      app.get("/goods", (req, res, next) => {
        res.json(goodList);
      });
    }
  }
};

// 调用方法
<script>
import axios from "axios";
export default {
  data() {
    return {
      goodsList: []
    };
  },
  components: {
    NavHeader,
    NavFooter,
    NavBread
  },
  mounted: function() {
    this.getGoodsList();
  },
  methods: {
    getGoodsList() {
      axios.get("/goods").then(result => {
        var res = result.data;
         console.log(result);
        this.goodsList = res.result;
      }).catch(error=>{
        console.log(error);
      });
    }
  }
};
</script>

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

你期待的结果是什么？实际看到的错误信息又是什么？

想本地获取到json数据，但是提示不能访问到“/goods”路径，404错误。报错如下：

[HMR] Waiting for update signal from WDS...
xhr.js?ec6c:178 GET http://localhost:8080/goods 404 (Not Found)
Error: Request failed with status code 404

at createError (createError.js?16d0:16)
at settle (settle.js?db52:18)
at XMLHttpRequest.handleLoad (xhr.js?ec6c:77)

Answer 1

楼主，首先要明白，webpack-dev-server 启用之后，静态文件是怎么映射的，搞清楚这个了，其实放哪都是可以访问到的。再者 vue-cli3 生成的包是没有 static文件夹，有 public 的。比如你的 mock 文件夹放到 public 目录下，并且 baseUrl: './' 。devServer 里相关的 before 方法去掉。那么访问的时候可以这样：

getGoodsList() {
      axios.get("public/mock/goods.json").then(result => {
        var res = result.data;
         console.log(result);
        this.goodsList = res.result;
      }).catch(error=>{
        console.log(error);
      });
    }

---

更新于 2018-11-29 9:50

vue-cli3 创建的项目工程如下：

vue.config.js 配置如下：

const goods = require('./mock/goods.json')
module.exports = {
  devServer: {
    before: (app) => {
      app.post('/goods', function (req, res, next) {
        res.json(goods)
      })
    }
  }
}

src/views/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import axios from 'axios'

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  created () {
    axios.post('/goods')
  }
}
</script>

运行结果如图：

Answer 2

404 很明显没有拦截到http://localhost:8080/goods

const Mock = require('mockjs')
const baseURL = process.env.API_ROOT;
const Random = Mock.Random;

Mock.mock(`${baseURL}apples/pick`, 'get' , (req, res) => {
    return {
      code:200,
      message:'success',
      data: ['a','b']
    }
})

Mock.mock('http://localhost:8080/goods', 'get' , (req, res) => {
    return {
      code:200,
      message:'success',
      data: ['a','b']
    }
})

mock文件放哪里都可以。在main.js记得require就好
require('./mock.js')