在vue.config.js中模拟后端接口数据

 

如今都流行先后端分离，前端干前端的事，后端干后端的事。

可是咱们在前端的实际开发时，有时候是须要数据辅助的，可是可能后端的接口还没写好，或者和后端在开发前期沟通太耗时耗力。咱们前端就须要本身模拟一下后端的数据。

首先我在使用VueCli搭建的项目根目录下新建一个vue.config.js的文件。可能以前的脚手架版本还有这个文件，可是VueCli3以后的都没有，因此要本身新建一下。

新建以后写下以下代码：

module.exports = {
  devServer: {
    before: (app, serve) => {
      app.get("/api/testReq", (req, res) => {
        res.json({
          title: "后端数据",
          body: "vue.config.js模拟的",
        });
      });
    },
  },
};

这是nodejs的express风格的接口格式。

在module.exports暴露的对象中，写上devServer属性。

devServer中存在一个钩子函数before，咱们在它里面写接口内容。

before函数存在两个参数，app和serve，咱们主要使用app这个参数。

模拟一下get请求，请求内容书写的方式和express一摸同样。第一个参数是请求地址，第二个参数是一个回调函数。

咱们以json格式返回一个title和一个body数据。

这就是一个最简单的模拟后端接口数据的代码。

下面很重要的一步是，必定要重启一下项目，否则是没用的。

ctrl+c 输入y，npm run serve

而后咱们其实就能够试着在浏览器中请求一下这个接口了。

由于我接口地址写的**/api/testReq**，而且开放的端口是8080，因此我在浏览器中输入的url地址是http://localhost:8080/api/testReq

而后就能够看到咱们json格式的后端数据了。

而后咱们就能够像正常请求后端接口同样在前端项目中进行请求了。
首先你要安装axios。

npm instal axios --save

而后在main.js里，全局引入一下axios。

import axios from 'axios'

为了咱们使用方便，直接在下面再写一句

Vue.prototype.$http = axios;

把axios挂载在vue实例上，这样咱们就能够直接用this.$http使用axios了。

接下来的话，我为了演示，就直接在App.vue的created钩子中简单请求一下。

async created () {
    const data = await this.$http.get('/api/testReq');
    console.log(data);
  }

而后运行项目，打开控制台，就能够看到请求到的后端数据对象了。

以上就是关于前端模拟后端接口数据，而且进行请求的所有内容。