vue-cli-plugin-axios-module

:rocket: 基于Vue-cli 3.0的axios插件，帮助你快速搭建前后端交互模块

Features

• 支持 单/多 系统交互
• 环境变量配置
• 业务模块划分
• 请求拦截器集成

Usage

terminal:

vue add axios-module

图形化(vue ui):

搜索 vue-cli-plugin-axios-module 即可

FAQ

单/多 系统交互

API的地址在api/url.js中进行配置

如果只与单系统进行交互，只需配置系统名称与不同环境的地址即可

如果与多系统进行交互，例如:

单点登录是单独一套服务(www.sso.com/api/v1/)

业务端是单独一套服务(www.backend.com/api/v1/)

那么就需要在api/url.js config中配置各个系统的名称以及不同环境下的地址

环境变量配置

// api/url.js
const config = {
	// sso端不同环境对应的地址
	sso: {
		development: 'www.ssodev.com',
		qa: 'www.ssoqa.com',
		prod: 'www.ssoprod.com'
	},
	// 业务端不同环境对应的地址
	backend: {
		development: 'www.bedev.com',
		qa: 'www.beqa.com',
		prod: 'www.beprod.com'
	}
}

在此文件中，请填写你的各系统不同环境的地址，最终会根据你的NODE_ENV环境变量导出一个对象（默认NODE_ENV为development）

// 导出的url对象
{
	sso: 'www.ssodev.com',
	backend: 'www.bedev.com'
}

业务模块划分

modules文件下是各个业务模块的API模块，使用时在你的业务组件中调用即可

import http from '../http';
import url from '../url';
export default {
  getList(params) {
    return http({
      method: 'get',
      url: `${url.backend}/api/v1/list`,
      params
    });
  },
};