独立封装Vue脚手架，包括axios封装、动态菜单、权限路由、webpack优化、eslint配置等。

1.axios封装

拦截器

  1. import axios from "axios";
  2. import { Notification, MessageBox, Message } from "element-ui";
  3. import store from "@/store";
  4. import { getToken } from "@/utils/auth";
  5. import errorCode from "@/utils/errorCode";
  6. import { tansParams } from "@/utils/ruoyi";
  8. axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
  9. // 创建axios实例
  10. const service = axios.create({
  11.   // axios中请求配置有baseURL选项，表示请求URL公共部分
  12.   baseURL: process.env.VUE_APP_BASE_API,
  13.   // 超时
  14.   timeout: 10000,
  15. });
  17. // request拦截器
  18. service.interceptors.request.use(
  19.   (config) => {
  20.     const isToken = (config.headers || {}).isToken === false;
  21.     if (getToken() && !isToken) {
  22.       config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
  23.     }
  24.     return config;
  25.   },
  26.   (error) => {
  27.     console.log(error);
  28.     Promise.reject(error);
  29.   }
  30. );
  32. // 响应拦截器
  33. service.interceptors.response.use(
  34.   (res) => {
  35.     const code = res.data.code || 200;
  36.     const message = errorCode[code] || res.data.msg || errorCode["default"];
  37.     if (code === 401) {
  38.       MessageBox.confirm(
  39.         "登录状态已过期，您可以继续留在该页面，或者重新登录",
  40.         "系统提示",
  41.         {
  42.           confirmButtonText: "重新登录",
  43.           cancelButtonText: "取消",
  44.           type: "warning",
  45.         }
  46.       ).then(() => {
  47.         store.dispatch("LogOut").then(() => {
  48.           location.reload(); // 为了重新实例化vue-router对象 避免bug
  49.         });
  50.       });
  51.     } else if (code === 500) {
  52.       Message({
  53.         message: message,
  54.         type: "error",
  55.       });
  56.       return Promise.reject(new Error(message));
  57.     } else if (code !== 200) {
  58.       Notification.error({
  59.         title: message,
  60.       });
  61.       return Promise.reject("error");
  62.     } else {
  63.       return res.data;
  64.     }
  65.   },
  66.   (error) => {
  67.     if (error.response?.status === 401) {
  68.       store.dispatch("LogOut").then(() => {
  69.         location.reload(); // 为了重新实例化vue-router对象 避免bug
  70.       });
  71.     } else {
  72.       Message({
  73.         message: error.message,
  74.         type: "error",
  75.         duration: 5 * 1000,
  76.       });
  77.       return Promise.reject(error);
  78.     }
  79.   }
  80. );
  82. // 通用下载方法
  83. export function download(url, params, filename) {
  84.   return service
  85.     .post(url, params, {
  86.       transformRequest: [
  87.         (params) => {
  88.           return tansParams(params);
  89.         },
  90.       ],
  91.       responseType: "blob",
  92.     })
  93.     .then((data) => {
  94.       const content = data;
  95.       const blob = new Blob([content]);
  96.       if ("download" in document.createElement("a")) {
  97.         const elink = document.createElement("a");
  98.         elink.download = filename;
  99.         elink.style.display = "none";
  100.         elink.href = URL.createObjectURL(blob);
  101.         document.body.appendChild(elink);
  102.         elink.click();
  103.         URL.revokeObjectURL(elink.href);
  104.         document.body.removeChild(elink);
  105.       } else {
  106.         navigator.msSaveBlob(blob, filename);
  107.       }
  108.     })
  109.     .catch((r) => {
  110.       console.error(r);
  111.     });
  112. }
  114. export default service;

2.动态菜单、权限路由

3.webpack优化

4.登录鉴权