loading 做成一个工具，且修改样式。

src/App.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import {defineComponent} from 'vue'
 import locale from 'element-plus/lib/locale/lang/zh-cn'
-import { useStore } from 'vuex'
+import {useStore} from 'vuex'
 
 export default defineComponent({
   name: 'App',
@@ -24,7 +24,7 @@ export default defineComponent({
 function getWindowSize() {
   const w = window.innerWidth
   const h = window.innerHeight - 96
-  return { w, h }
+  return {w, h}
 }
 </script>
 
@@ -64,22 +64,14 @@ function getWindowSize() {
   border-radius: 4px;
 }
 
-.axios-loading,
-.axios-loading1 {
-  animation: axiosloading 1s;
-}
 .axios-loading2 {
-  animation: axiosloading 1s;
-}
-.axios-loading3 {
   animation: axiosloading 2s;
+  background-image: url('/src/assets/images/loading.gif');
+  -webkit-background-image: url('/src/assets/images/loading.gif');
+  background-repeat: no-repeat;
+  background-position: center;
 }
-.axios-loading4 {
-  animation: axiosloading 3s;
-}
-.axios-loading5 {
-  animation: axiosloading 4s;
-}
+
 @keyframes axiosloading {
   0% {
     opacity: 0;

src/utils/loading.js

@@ -1,16 +1,19 @@
-import { ElLoading } from 'element-plus'
-let loadingInstance
-const option = {
-  fullscreen: true,
-  text: '处理中...',
-  // spinner: 'el-icon-loading',
-  background: 'rgba(255, 255, 255, 0.55)',
-}
+import {ElLoading} from 'element-plus'
+
+var loading
 
-export function showLoading() {
-  loadingInstance = ElLoading.service(option)
+/*开启遮罩*/
+export function startLoading() {
+    loading = ElLoading.service({
+        customClass: 'axios-loading2',
+        lock: true,
+        background: 'rgba(255,255,255,0.5)',
+    })
 }
 
-export function closeLoading() {
-  loadingInstance.close()
+/*关闭遮罩*/
+export function endLoading() {
+    if (loading) {
+        loading.close()
+    }
 }

src/utils/request.js

@@ -1,8 +1,9 @@
 import axios from 'axios'
-import {ElLoading, ElMessage, ElMessageBox} from 'element-plus'
+import {ElMessage, ElMessageBox} from 'element-plus'
 import Cookies from 'js-cookie'
 import router from '@/router'
 import store from '@/store'
+import {endLoading, startLoading} from "./loading";
 
 const apiUrl = import.meta.env.VITE_BASE_URL
 
@@ -13,39 +14,17 @@ const service = axios.create({
 })
 
 /*axios请求拦截*/
-var loading
-
-/*开启遮罩*/
-function startLoading(showLoadingTime) {
-    showLoadingTime = showLoadingTime || '2'
-    loading = ElLoading.service({
-        customClass: 'axios-loading' + showLoadingTime,
-        lock: true,
-        text: '加载中......',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)',
-    })
-}
-
-/*关闭遮罩*/
-function endLoading() {
-    if (loading) {
-        loading.close()
-    }
-}
-
-
 service.interceptors.request.use(
     (config) => {
-        startLoading(1)
+        startLoading()
         if (store.getters['user/token']) {
             config.headers['token'] = store.state.user.token
         }
-        store.commit('app/setLoading', false)
+        //store.commit('app/setLoading', false)
         return config
     },
     (error) => {
-        store.commit('app/setLoading', false)
+        //store.commit('app/setLoading', false)
         endLoading()
         return Promise.reject(error)
     }
@@ -53,7 +32,7 @@ service.interceptors.request.use(
 
 service.interceptors.response.use(
     (response) => {
-        store.commit('app/setLoading', false)
+        //store.commit('app/setLoading', false)
         endLoading()
         if (response.data.code === 200 || response.data.code === 0) {
             return response.data.data
@@ -113,7 +92,7 @@ service.interceptors.response.use(
     },
     (error) => {
         endLoading()
-        store.commit('app/setLoading', false)
+        //store.commit('app/setLoading', false)
         ElMessage({
             message: error,
             type: 'error',

vite.config.js

@@ -1,30 +1,30 @@
-import { defineConfig } from 'vite'
+import {defineConfig} from 'vite'
 import legacy from '@vitejs/plugin-legacy'
 import vue from '@vitejs/plugin-vue'
-import { resolve } from 'path'
+import {resolve} from 'path'
 
 const pathResolve = (dir) => {
-  return resolve(__dirname, '.', dir)
+    return resolve(__dirname, '.', dir)
 }
 
 const alias = {
-  '@': pathResolve('src'),
+    '@': pathResolve('src'),
 }
 
 export default defineConfig({
-  resolve: {
-    alias,
-  },
-  plugins: [
-    vue(),
-    legacy({
-      targets: 'chrome 49',
-    }),
-  ],
-  server: {
-    host: '0.0.0.0',
-  },
-  build: {
-    chunkSizeWarningLimit: 1000,
-  },
+    resolve: {
+        alias,
+    },
+    plugins: [
+        vue(),
+        legacy({
+            targets: 'chrome 49',
+        }),
+    ],
+    server: {
+        host: '0.0.0.0',
+    },
+    build: {
+        chunkSizeWarningLimit: 1000,
+    },
 })