vue 2.0 模拟后台数据接口时 请求路径undefined 报404

先上报错截图



锲子:vue2.0  高仿饿了么

起因:我的目的是mock一下数据,便于前端axios发请求
(开小差:
vue-cli的build文件夹下没有dev-server.js文件,怎么配置mock数据?填坑:最新版本的vue-cli已经放弃dev-server.js,只需在webpack.dev.conf.js配置就行,如下

新版webpack.dev.conf.js配置:

1、在const portfinder = require(‘portfinder’)后添加
const express = require('express')
const app = express()
var goods = require('../static/goods.json')//加载本地数据文件
var router = express.Router()
app.use('/api', router)
 
2、然后找到devServer,在里面添加
 before(app) {
      app.get('/api/productList', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })//接口返回json数据,上面配置的数据appData就赋值给data请求后调用
      })
 }

如图:
npm run dev  http://localhost:8081/api/sellers 看到请求的数据,说明mock数据配置成功

前端axios请求:

控制台报上面的错误,网上找了好久,几近崩溃......



错误原因:

后来发现,按照正常的组件使用经验,在main.js里写了
Vue.use(axios); 因为 axios 没有 install。
用 axios时,不需要用 Vue.use(axios) ,就能直接使用
import axios from 'axios';

getSellers () {
  axios.get("/api/sellers")
       .then(res=>{
        console.log(res);
       })
       .catch(err=>{
        console.log(err);
        this.$toast("查询店铺列表失败");
       });
  }






处理结果:

把main.js中的
Vue.use(axios); 删掉,瞬间正常!!!