简介

YAPI是一个可视化的接口管理平台，而vue-element-admin是一个基于vue和element-ui的后台管理系统模板。将这两者结合起来，可以实现前后端开发的高效协作。本文将介绍如何在vue-element-admin框架中连接YAPI并配置vue.config.js。

步骤

安装YAPI

首先，我们需要安装YAPI。可以通过npm或者yarn来进行安装。

npm install yapi-cli -g

启动YAPI服务

在安装完YAPI之后，我们需要启动YAPI服务。

yapi server

YAPI服务默认会占用3000端口，如果该端口被占用，请在启动前关闭占用该端口的服务。

创建YAPI项目并导入接口文档

在启动YAPI服务后，我们可以通过浏览器访问http://localhost:3000来打开YAPI的控制台。首次登录时，需要设置管理员账号和密码。

登录后，可以创建一个新的项目，并在该项目中导入接口文档。接口文档可以是yaml或者json格式。导入后，YAPI会自动解析接口的信息。

获取YAPI的token和接口mock地址

为了在vue-element-admin中连接YAPI，我们需要获取YAPI的token和接口mock地址。

在YAPI的控制台中，找到项目列表，点击进入您所创建的项目。在项目详情页面的左侧菜单中，选择项目设置，然后点击token选项卡。在该页面中，可以找到YAPI的token，将其复制。

接口mock地址可以在接口文档导入后的接口详情页面中找到。

配置vue.config.js

在vue-element-admin框架的根目录中，可以找到vue.config.js文件。打开该文件，将以下代码添加到文件末尾：

const path = require('path');

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000/mock/',  // 替换成您自己的YAPI接口mock地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

请将上述代码中的http://localhost:3000/mock/替换为您在YAPI中获取到的接口mock地址。

在代码中使用YAPI接口

现在，您可以在vue-element-admin框架中使用YAPI的接口了。

在vue文件的script节中，可以使用axios或其他请求库来发送接口请求。例如：

import axios from 'axios';

axios.get('/api/mock/user/list').then(response => {
  // 处理接口返回的数据
}).catch(error => {
  // 错误处理
});

此处的/api/mock/user/list对应的是YAPI中导入的接口路径。

总结

使用vue-element-admin连接YAPI可以让前后端开发更加高效。通过以上步骤，您可以轻松地将YAPI集成到vue-element-admin中，并利用YAPI的接口管理和mock功能来加速开发过程。祝您使用愉快！

本文来自极简博客，作者：美食旅行家，转载请注明原文链接：vue-element-admin框架连接YAPI配置vue.config.js