开发环境需要配置代理devServer: {// host: 'localhost', // ip 本地// open: true, // 配置自动启动浏览器port: 3000, // 设置端口号proxy: {'/api': { // 接口以api开头的才用代理target: '服务器ip', //axiso实例里的baseURL的值（后端路径）changeOrigin: true,pathRewrite: {//这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替// 比如我要调用'http://xxx.xxx.x.xxx:8080/login'，直接写‘/api/user/add’即可 代理后地址栏显示/  '^/api': '',}}},},

axios封装引入

main.js

import axios from "axios";
axios.defaults.withCredentials = true;

在src文件下，创建api/_BaseAxios.js文件

import axios from "axios"; // 引入axios
import AxiosInterceptors from './_AxiosInterceptors' // 引入拦截器规则import {RBAC_BASE_URL, // api路径TIMEOUT        // 超时时长
} from '../const.js' let requestConfig = {baseURL: RBAC_BASE_URL, // 配置api路径timeout: TIMEOUT        // 配置超时时长
}const baseAxios = axios.create(requestConfig); // 创建axios实例
AxiosInterceptors.setInterceptors(baseAxios);  // 使用拦截器规则export default baseAxios;

在src文件下，创建api/_AxiosInterceptors.js文件. 在_BaseAxios中引入

store不需要可以注释掉

import store from "@/store/index";function setInterceptors(axios) {// 在被then()和catch()方法处理之前，把 客户端请求 拦截下来优先处理// api 返回的数据均为json，如果请求没有指明，则默认视为jsonaxios.interceptors.request.use(config => {// 在发送请求之前做些什么if (store.state.token) {// 添加请求头config.headers['token'] = store.state.tokenconfig.headers['Authorization'] = store.state.token}return config;}, error => {// 对请求错误做些什么return Promise.reject(error);});// 在被then()和catch()方法处理之前，把 服务器返回结果 拦截下来优先处理axios.interceptors.response.use(response => {/*** 响应成功拦截器 */// console.log("response", response)return response;}, error => {return Promise.reject(error);});return axios;
}export default {setInterceptors
}

新建config.js 在_BaseAxios中引入

// export const PROJECT_NAME = 'Panda';
// export const TOKEY_ATTR_NAME = 'X-Access-Token'; // TOKEN的属性名(即客户端传token到服务端，token的属性名)
// export const IS_LOGIN_NEEDED = true; // 系统是否需要登录后使用let rbacBaseUrl; // 基础API地址
switch (process.env.NODE_ENV) {case "production": // 发布到服务器 npm run buildrbacBaseUrl = '服务器ip/';break;case "development": // 本机前端开发调试 npm run servedefault:rbacBaseUrl = '/api';break;
}
export const RBAC_BASE_URL = rbacBaseUrl;export const TIMEOUT = 10000; // 一般请求超时时间
// export const UPLOAD_TIMEOUT = 0; // 指定文件上传请求超时的毫秒数(0 表示无超时时间)// //文件地址
// export const uploadImgUrl = '服务器ip/';

接口调用

import BaseAxios from "../_BaseAxios";
import ResHelper from "../_ResponseHelper.js";/*** @description 登录                   post,data* @param {String} account 账号* @param {String} password 密码*/
function login(params) {return BaseAxios({url: `system/Login/login`,method: "post",data: {"account": params.account,"password": params.password,}// data: params,})// .then(ResHelper.handler);
}/*** @description 注册                   post,params* @param {Integer} account 账号* @param {String} password 密码* @param {String} code 验证码* @param {String} mailbox 邮箱* @param {String} username 名字* @param {Integer} phoneNumber 电话号码*/
function register(params) {return BaseAxios({url: `system/Login/register`,method: "post",params: params})
}/*** @description 获取用户信息               get* @param {String} Authorization 验证信息*/
function getUser() {return BaseAxios({url: `system/Login/user`,method: "get",})
}/*** @description 获取申请列表            get,params* @param {Integer} pageSize 页数* @param {String} keyword 姓名*/
function getApplyList(params) {return BaseAxios({url: `system/Personal/list`,method: "get",params: params,})
}export default {login,register,getUser,getApplyList,
}