diff --git a/.env.dev b/.env.dev
new file mode 100644
index 0000000..411b5e4
--- /dev/null
+++ b/.env.dev
@@ -0,0 +1,3 @@
+NODE_ENV = 'development'
+VITE_APP_OSS = 'https://oss.injs.jsxww.cn'
+VITE_APP_API = 'https://api.op.injs.jsxww.cn'
diff --git a/.env.prod b/.env.prod
new file mode 100644
index 0000000..a8067af
--- /dev/null
+++ b/.env.prod
@@ -0,0 +1,3 @@
+NODE_ENV = 'production'
+VITE_APP_OSS = 'https://oss.injs.jsxww.cn'
+VITE_APP_API = 'https://api.op.injs.jsxww.cn'
diff --git a/.env.test b/.env.test
new file mode 100644
index 0000000..a8067af
--- /dev/null
+++ b/.env.test
@@ -0,0 +1,3 @@
+NODE_ENV = 'production'
+VITE_APP_OSS = 'https://oss.injs.jsxww.cn'
+VITE_APP_API = 'https://api.op.injs.jsxww.cn'
diff --git a/package.json b/package.json
index c073482..e836f7d 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,9 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
+    "dev": "vite --mode dev",
+    "build-test": "vite build --mode test",
+    "build-prod": "vite build --mode prod",
     "preview": "vite preview"
   },
   "dependencies": {
diff --git a/public/9c67d262-f53e-4358-9f99-beef9538e579.mp4 b/public/9c67d262-f53e-4358-9f99-beef9538e579.mp4
new file mode 100644
index 0000000..d164cf5
Binary files /dev/null and b/public/9c67d262-f53e-4358-9f99-beef9538e579.mp4 differ
diff --git a/src/App.vue b/src/App.vue
index 0470807..bcb5065 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,8 +2,8 @@
 import {
   NMessageProvider, NConfigProvider, zhCN, dateZhCN
 } from 'naive-ui'
-import {theme} from "./global/config";
-import HappyBoot from "./HappyBoot.vue";
+import {theme} from "@/global/config";
+import HappyBoot from "@/HappyBoot.vue";
 
 </script>
 <template>
diff --git a/src/HappyBoot.vue b/src/HappyBoot.vue
index 6054e7a..6f60fef 100644
--- a/src/HappyBoot.vue
+++ b/src/HappyBoot.vue
@@ -1,5 +1,5 @@
 <script setup>
-import HbAdminDevTool from "./components/dev/HbAdminDevTool.vue";
+import HbAdminDevTool from "@/components/dev/HbAdminDevTool.vue";
 import { useMessage } from 'naive-ui'
 window.$message = useMessage()
 </script>
diff --git a/src/components/HbAdminHead.vue b/src/components/HbAdminHead.vue
index 3073f5d..9b2970f 100644
--- a/src/components/HbAdminHead.vue
+++ b/src/components/HbAdminHead.vue
@@ -2,11 +2,11 @@
 import { NIcon,NBadge,NAvatar,NSwitch,NCarousel,NDivider,NDropdown,useMessage, NText, NBreadcrumb,NBreadcrumbItem } from "naive-ui"
 import { Moon,SunnyOutline,Notifications } from "@vicons/ionicons5"
 import {ref, h, onMounted, computed} from "vue"
-import {isDarkTheme} from "../global/config";
-import framework from "../global/framework";
+import {isDarkTheme} from "@/global/config";
+import framework from "@/global/framework";
 import { CubeOutline } from "@vicons/ionicons5"
 import {useRouter} from "vue-router";
-import security from "../global/security";
+import security from "@/global/security";
 
 const router = useRouter()
 
diff --git a/src/components/HbAdminLogo.vue b/src/components/HbAdminLogo.vue
index 312f09f..dc3f8a9 100644
--- a/src/components/HbAdminLogo.vue
+++ b/src/components/HbAdminLogo.vue
@@ -5,7 +5,7 @@ import {
   NGradientText
 } from "naive-ui"
 
-import {isMenuCollapsed} from "../global/config";
+import {isMenuCollapsed} from "@/global/config";
 import {computed} from "vue";
 const enterActiveClass = computed(()=>{
   return !isMenuCollapsed.value ? 'animate__animated animate__slideInRight animate__faster' : 'animate__animated animate__slideInLeft animate__faster'
diff --git a/src/components/HbAdminMenu.vue b/src/components/HbAdminMenu.vue
index 3470cf9..1f494ba 100644
--- a/src/components/HbAdminMenu.vue
+++ b/src/components/HbAdminMenu.vue
@@ -4,7 +4,7 @@ import {NIcon, NMenu} from "naive-ui"
 import {
   CubeOutline
 } from "@vicons/ionicons5"
-import framework from '../global/framework'
+import framework from '@/global/framework'
 import {useRouter} from "vue-router";
 
 const router = useRouter()
diff --git a/src/components/HbAdminNav.vue b/src/components/HbAdminNav.vue
index 45e4bf2..9179bc1 100644
--- a/src/components/HbAdminNav.vue
+++ b/src/components/HbAdminNav.vue
@@ -10,7 +10,7 @@ import {
   CloseCircleSharp,
   CubeOutline
 } from "@vicons/ionicons5"
-import framework from '.././global/framework'
+import framework from '@/global/framework'
 import {h, nextTick, ref, watch} from "vue";
 import {useRouter} from "vue-router";
 
diff --git a/src/components/HbAdminOnlineUserList.vue b/src/components/HbAdminOnlineUserList.vue
index 2ade2cc..0464154 100644
--- a/src/components/HbAdminOnlineUserList.vue
+++ b/src/components/HbAdminOnlineUserList.vue
@@ -1,6 +1,6 @@
 <script setup>
 import {NAvatar,NSpace,NBadge,NLayout,NLayoutHeader} from "naive-ui";
-import {isMenuCollapsed} from "../global/config";
+import {isMenuCollapsed} from "@/global/config";
 import {computed} from "vue";
 const enterActiveClass = computed(()=>{
   return !isMenuCollapsed.value ? 'animate__animated animate__slideInRight animate__faster' : 'animate__animated animate__slideInLeft animate__faster'
diff --git a/src/components/HbAdminSimpleChart.vue b/src/components/HbAdminSimpleChart.vue
index d87a18a..ebeea24 100644
--- a/src/components/HbAdminSimpleChart.vue
+++ b/src/components/HbAdminSimpleChart.vue
@@ -1,7 +1,7 @@
 <script setup>
 import * as echarts from 'echarts';
 import {computed, nextTick, onMounted, ref, watch} from "vue";
-import {isDark,isMenuCollapsed} from "../global/config";
+import {isDark,isMenuCollapsed} from "@/global/config";
 import {useWindowSize, useDebounceFn} from '@vueuse/core'
 
 
diff --git a/src/components/HbAdminUserCard.vue b/src/components/HbAdminUserCard.vue
index e5c8b33..488e1b0 100644
--- a/src/components/HbAdminUserCard.vue
+++ b/src/components/HbAdminUserCard.vue
@@ -3,7 +3,7 @@ import {NAvatar,NLayout,NLayoutHeader,NIcon,NButton,NBadge,NSpace} from "naive-u
 import {
   EarthOutline
 } from "@vicons/ionicons5"
-import {isMenuCollapsed} from "../global/config";
+import {isMenuCollapsed} from "@/global/config";
 
 import security from "../global/security";
 import {computed, ref} from "vue";
diff --git a/src/components/dev/HbAdminDevTool.vue b/src/components/dev/HbAdminDevTool.vue
index a5a6c08..25384eb 100644
--- a/src/components/dev/HbAdminDevTool.vue
+++ b/src/components/dev/HbAdminDevTool.vue
@@ -1,9 +1,9 @@
 <script setup>
 import {NCard, NSpace, NButton, NTag, NCode, NTable, useMessage,NAlert} from "naive-ui";
-import framework from "../../global/framework";
-import security from "../../global/security";
-import hljs from 'highlight.js/lib/core'
-import javascript from 'highlight.js/lib/languages/javascript'
+import framework from "@/global/framework";
+import security from "@/global/security";
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
 import {onMounted, ref, watch} from "vue";
 
 hljs.registerLanguage('javascript', javascript)
diff --git a/src/global/api/index.js b/src/global/api/index.js
new file mode 100644
index 0000000..0228337
--- /dev/null
+++ b/src/global/api/index.js
@@ -0,0 +1,15 @@
+import request from '../http';
+
+// demo 代码
+// export default {
+//   middleViewData: data => request.get('/jscApi/middleViewData', { data }), // 正常请求
+//   cancelReq: data => request.get('http://localhost:3003/jscApi/middleViewData', { data, cancelRequest: true }), // 测试取消请求
+//   reqAgainSend: data => request.get('/equ/equTypeList11', { data, retry: 3, retryDelay: 1000 }), // 测试请求重发，除了原请求外还会重发3次
+//   cacheEquList: data => request.get('/equ/equList', { data, cache: true, setExpireTime: 30000 }), // 测试缓存请求带参数：setExpireTime 为缓存有效时间ms
+//   cacheEquListParams: data => request.get('/equ/equList', { data, cache: true }) // 测试缓存请求参数值不一样
+// };
+
+
+export default {
+  getCaptcha: () => request.get('/captcha')
+}
diff --git a/src/global/http/cancelRepeatRquest.js b/src/global/http/cancelRepeatRquest.js
new file mode 100644
index 0000000..f5fc748
--- /dev/null
+++ b/src/global/http/cancelRepeatRquest.js
@@ -0,0 +1,44 @@
+// 取消重复请求
+/*  假如用户重复点击按钮，先后提交了 A 和 B 这两个完全相同（考虑请求路径、方法、参数）的请求，我们可以从以下几种拦截方案中选择其一：
+ 1. 取消 A 请求，只发出 B 请求（会导致A请求已经发出去,被后端处理了）
+ 2. 取消 B 请求，只发出 A 请求
+ 3. 取消 B 请求，只发出 A 请求，把收到的 A 请求的返回结果也作为 B 请求的返回结果
+ 第3种方案需要做监听处理增加了复杂性，结合我们实际的业务需求，最后采用了第2种方案来实现，即：
+ 只发第一个请求。在 A 请求还处于 pending 状态时，后发的所有与 A 重复的请求都取消，实际只发出 A 请求，直到 A 请求结束（成功/失败）才停止对这个请求的拦截。
+*/
+import Axios from 'axios';
+import { generateReqKey } from './commonFuns';
+
+// addPendingRequest ：用于把当前请求信息添加到pendingRequest对象 中；
+const pendingRequest = new Map(); // Map对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
+export function addPendingRequest(config) {
+  if (config.cancelRequest) {
+    const requestKey = generateReqKey(config);
+    if (pendingRequest.has(requestKey)) {
+      config.cancelToken = new Axios.CancelToken(cancel => {
+        // cancel 函数的参数会作为 promise 的 error 被捕获
+        cancel(`${config.url} 请求已取消`);
+      });
+    } else {
+      config.cancelToken =
+        config.cancelToken ||
+        new Axios.CancelToken(cancel => {
+          pendingRequest.set(requestKey, cancel);
+        });
+    }
+  }
+}
+
+// removePendingRequest：检查是否存在重复请求，若存在则取消已发的请求。
+export function removePendingRequest(response) {
+  if (response && response.config && response.config.cancelRequest) {
+    const requestKey = generateReqKey(response.config);
+    // 判断是否有这个 key
+    if (pendingRequest.has(requestKey)) {
+      const cancelToken = pendingRequest.get(requestKey);
+      cancelToken(requestKey);
+      pendingRequest.delete(requestKey);
+    }
+  }
+}
+
diff --git a/src/global/http/commonFuns.js b/src/global/http/commonFuns.js
new file mode 100644
index 0000000..04206ab
--- /dev/null
+++ b/src/global/http/commonFuns.js
@@ -0,0 +1,29 @@
+import Qs from 'qs';
+
+// generateReqKey ：用于根据当前请求的信息，生成请求 Key；
+export function generateReqKey(config) {
+  // 响应的时候，response.config 中的data 是一个JSON字符串，所以需要转换一下
+  if (config && config.data && isJsonStr(config.data)) {
+    config.data = JSON.parse(config.data);
+  }
+  const { method, url, params, data } = config; // 请求方式，参数，请求地址，
+  return [method, url, Qs.stringify(params), Qs.stringify(data)].join('&'); // 拼接
+}
+
+// 判断一个字符串是否为JSON字符串
+export let isJsonStr = str => {
+  if (typeof str == 'string') {
+    try {
+      let obj = JSON.parse(str);
+      if (typeof obj == 'object' && obj) {
+        return true;
+      } else {
+        return false;
+      }
+    } catch (e) {
+      console.log('error：' + str + '!!!' + e);
+      return false;
+    }
+  }
+};
+
diff --git a/src/global/http/index.js b/src/global/http/index.js
new file mode 100644
index 0000000..e1338fe
--- /dev/null
+++ b/src/global/http/index.js
@@ -0,0 +1,83 @@
+import security from '../security';
+import framework from "../framework";
+import Axios from 'axios';
+import {addPendingRequest, removePendingRequest} from './cancelRepeatRquest'; // 取消重复请求
+import {againRequest} from './requestAgainSend'; // 请求重发
+import {requestInterceptor as cacheReqInterceptor, responseInterceptor as cacheResInterceptor} from './requestCache';
+import router from "../router";
+
+// 返回结果处理
+// 自定义约定接口返回{code: xxx, data: xxx, msg:'err message'}
+const responseHandle = {
+  0: response => {
+    return response.data;
+  },
+  401: response => {
+    window.$message.error('登录状态已过期，请重新登录！')
+    security.signOut()
+    router.push('/login')
+  },
+  default: response => {
+    window.$message.error(response.data.message)
+    return Promise.reject(response);
+  }
+};
+
+const axios = Axios.create({
+  baseURL: import.meta.env['VITE_APP_API'] || '',
+  timeout: 60000
+});
+
+// 添加请求拦截器
+axios.interceptors.request.use(
+  function (config) {
+    // clientId
+    config.headers.clientId = framework.getTracker().clientId
+    // 请求头用于接口token 认证
+    security.getToken() && (config.headers['Authorization'] = security.getToken());
+
+    if (config.method.toLocaleLowerCase() === 'post' || config.method.toLocaleLowerCase() === 'put') {
+      // 参数统一处理，请求都使用data传参
+      config.data = config.data.data;
+    } else if (config.method.toLocaleLowerCase() === 'get' || config.method.toLocaleLowerCase() === 'delete') {
+      // 参数统一处理
+      config.params = config.data;
+    } else {
+      window.$message.error('不允许的请求方法：' + config.method);
+    }
+    // pendding 中的请求，后续请求不发送（由于存放的peddingMap 的key 和参数有关，所以放在参数处理之后）
+    addPendingRequest(config); // 把当前请求信息添加到pendingRequest对象中
+    //  请求缓存
+    cacheReqInterceptor(config, axios);
+    return config;
+  },
+  function (error) {
+    return Promise.reject(error);
+  }
+);
+
+// 添加响应拦截器
+axios.interceptors.response.use(
+  response => {
+    // 响应正常时候就从pendingRequest对象中移除请求
+    removePendingRequest(response);
+    cacheResInterceptor(response);
+    return responseHandle[response.data.code === '' ? 'default' : response.data.code](response);
+  },
+  error => {
+    // 从pending 列表中移除请求
+    removePendingRequest(error.config || {});
+    // 需要特殊处理请求被取消的情况
+    if (!Axios.isCancel(error)) {
+      // 请求重发
+      return againRequest(error, axios);
+    }
+    // 请求缓存处理方式
+    if (Axios.isCancel(error) && error.message.data && error.message.data.config.cache) {
+      return Promise.resolve(error.message.data.data.data); // 返回结果数据
+    }
+    return Promise.reject(error);
+  }
+);
+export default axios;
+
diff --git a/src/global/http/requestAgainSend.js b/src/global/http/requestAgainSend.js
new file mode 100644
index 0000000..011a1e0
--- /dev/null
+++ b/src/global/http/requestAgainSend.js
@@ -0,0 +1,38 @@
+// 实现 请求错误时重新发送接口
+import { isJsonStr } from './commonFuns';
+/**
+ * @param {失败信息} err
+ * @param {实例化的单例} axios
+ * @returns
+ */
+export function againRequest(err, axios) {
+  let config = err.config;
+  // config.retry 具体接口配置的重发次数
+  if (!config || !config.retry) return Promise.reject(err);
+
+  // 设置用于记录重试计数的变量 默认为0
+  config.__retryCount = config.__retryCount || 0;
+
+  // 判断是否超过了重试次数
+  if (config.__retryCount >= config.retry) {
+    return Promise.reject(err);
+  }
+  // 重试次数
+  config.__retryCount += 1;
+
+  // 延时处理
+  var backoff = new Promise(function(resolve) {
+    setTimeout(function() {
+      resolve();
+    }, config.retryDelay || 1000);
+  });
+  // 重新发起axios请求
+  return backoff.then(function() {
+    // 判断是否是JSON字符串
+    // TODO: 未确认config.data再重发时变为字符串的原因
+    if (config.data && isJsonStr(config.data)) {
+      config.data = JSON.parse(config.data);
+    }
+    return axios(config);
+  });
+}
diff --git a/src/global/http/requestCache.js b/src/global/http/requestCache.js
new file mode 100644
index 0000000..1a4451f
--- /dev/null
+++ b/src/global/http/requestCache.js
@@ -0,0 +1,90 @@
+import Axios from 'axios';
+import { generateReqKey } from './commonFuns';
+
+const options = {
+  storage: true, // 是否开启localstorage缓存
+  storageKey: 'apiCache',
+  storage_expire: 600000, // localStorage 数据存储时间10min（刷新页面判断是否清除）
+  expire: 20000 // 每个接口数据缓存ms 数
+};
+// 初始化
+(function() {
+  let cache = window.localStorage.getItem(options.storageKey);
+  if (cache) {
+    let { storageExpire } = JSON.parse(cache);
+    // 未超时不做处理
+    if (storageExpire && getNowTime() - storageExpire < options.storage_expire) {
+      return;
+    }
+  }
+  window.localStorage.setItem(options.storageKey, JSON.stringify({ data: {}, storageExpire: getNowTime() }));
+})();
+
+function getCacheItem(key) {
+  let cache = window.localStorage.getItem(options.storageKey);
+  let { data, storageExpire } = JSON.parse(cache);
+  return (data && data[key]) || null;
+}
+function setCacheItem(key, value) {
+  let cache = window.localStorage.getItem(options.storageKey);
+  let { data, storageExpire } = JSON.parse(cache);
+  data[key] = value;
+  window.localStorage.setItem(options.storageKey, JSON.stringify({ data, storageExpire }));
+}
+
+let _CACHES = {};
+// 使用Proxy代理
+let cacheHandler = {
+  get: function(target, key) {
+    let value = target[key];
+    console.log(`${key} 被读取`, value);
+    if (options.storage && !value) {
+      value = getCacheItem(key);
+    }
+    return value;
+  },
+  set: function(target, key, value) {
+    console.log(`${key} 被设置为 ${value}`);
+    target[key] = value;
+    if (options.storage) {
+      setCacheItem(key, value);
+    }
+
+    return true;
+  }
+};
+let CACHES = new Proxy(_CACHES, cacheHandler);
+
+export function requestInterceptor(config, axios) {
+  // 开启缓存则保存请求结果和cancel 函数
+  if (config.cache) {
+    let data = CACHES[`${generateReqKey(config)}`];
+    // 这里用于存储是默认时间还是用户传递过来的时间
+    let setExpireTime;
+    config.setExpireTime ? (setExpireTime = config.setExpireTime) : (setExpireTime = options.expire);
+    // 判断缓存数据是否存在 存在的话 是否过期 没过期就返回
+    if (data && getNowTime() - data.expire < setExpireTime) {
+      config.cancelToken = new Axios.CancelToken(cancel => {
+        // cancel 函数的参数会作为 promise 的 error 被捕获
+        cancel(data);
+      }); // 传递结果到catch中
+    }
+  }
+}
+
+export function responseInterceptor(response) {
+  // 返回的code === 200 时候才会缓存下来
+  if (response && response.config.cache && response.data.code === 200) {
+    let data = {
+      expire: getNowTime(),
+      data: response
+    };
+
+    CACHES[`${generateReqKey(response.config)}`] = data;
+  }
+}
+
+// 获取当前时间戳
+function getNowTime() {
+  return new Date().getTime();
+}
diff --git a/src/global/router/config.js b/src/global/router/config.js
index c0ef692..84fc763 100644
--- a/src/global/router/config.js
+++ b/src/global/router/config.js
@@ -3,7 +3,7 @@ import {createDefaultRouterInterceptor} from 'happykit'
 const modules = import.meta.glob("/src/views/**/**.vue")
 
 import happyFramework from '../framework'
-import routerData from '../../mock/routerData'
+import routerData from '@/mock/routerData'
 import security from '../security';
 
 
diff --git a/src/main.js b/src/main.js
index 1303742..b0492fa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,6 +7,10 @@ import happyFramework from './global/framework'
 import happySecurity from './global/security'
 import router from './global/router'
 
+Object.keys(import.meta.env).forEach((k,v)=>{
+  console.log('[happyboot]',k,import.meta.env[k])
+})
+
 createApp(App)
   .use(router)
   .use(happyFramework)
diff --git a/src/views/base-list/index.vue b/src/views/base-list/index.vue
index 7a014a9..9af8ae3 100644
--- a/src/views/base-list/index.vue
+++ b/src/views/base-list/index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import HbAdminPageLayout from '../../components/HbAdminPageLayout.vue'
+import HbAdminPageLayout from '@/components/HbAdminPageLayout.vue'
 import DialogCreate from './dialog/Create.vue'
 import {
   NLayout, NLayoutHeader, NLayoutContent, NDataTable,
diff --git a/src/views/card-list/index.vue b/src/views/card-list/index.vue
index 9f3c787..f54cdee 100644
--- a/src/views/card-list/index.vue
+++ b/src/views/card-list/index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import HbAdminPageLayout from '../../components/HbAdminPageLayout.vue'
+import HbAdminPageLayout from '@/components/HbAdminPageLayout.vue'
 import {
   NLayout, NLayoutHeader, NLayoutContent, NLayoutFooter, NCard,
   NGrid, NGridItem, NDatePicker, NInput, NButton, NSpace, NIcon, useMessage,
diff --git a/src/views/custom-tab-title-demo/index.vue b/src/views/custom-tab-title-demo/index.vue
index 5de293e..0a83a87 100644
--- a/src/views/custom-tab-title-demo/index.vue
+++ b/src/views/custom-tab-title-demo/index.vue
@@ -1,6 +1,6 @@
 <script setup>
 import {NLayout, NLayoutContent, NAlert, NCode, NButton, NSpace, NCard, NInput} from 'naive-ui';
-import HbAdminPageLayout from "../../components/HbAdminPageLayout.vue";
+import HbAdminPageLayout from "@/components/HbAdminPageLayout.vue";
 import hljs from 'highlight.js/lib/core'
 import javascript from 'highlight.js/lib/languages/javascript'
 import {useRouter} from "vue-router";
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 85cf15c..01d5217 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -5,10 +5,10 @@ import {
   NTimeline, NTimelineItem,
   NAvatarGroup, NTooltip, NAvatar
 } from "naive-ui";
-import HbAdminPageLayout from "../../components/HbAdminPageLayout.vue";
-import HbAdminChartLine from "../../components/charts/HbAdminChartLine.vue";
-import HbAdminChartPie from "../../components/charts/HbAdminChartPie.vue";
-import HbAdminChartBar from "../../components/charts/HbAdminChartBar.vue";
+import HbAdminPageLayout from "@/components/HbAdminPageLayout.vue";
+import HbAdminChartLine from "@/components/charts/HbAdminChartLine.vue";
+import HbAdminChartPie from "@/components/charts/HbAdminChartPie.vue";
+import HbAdminChartBar from "@/components/charts/HbAdminChartBar.vue";
 
 const options = [
   {
diff --git a/src/views/hide/index.vue b/src/views/hide/index.vue
index 32f875f..12853f5 100644
--- a/src/views/hide/index.vue
+++ b/src/views/hide/index.vue
@@ -1,6 +1,6 @@
 <script setup>
 
-import HbAdminPageLayout from "../../components/HbAdminPageLayout.vue";
+import HbAdminPageLayout from "@/components/HbAdminPageLayout.vue";
 </script>
 <template>
   <hb-admin-page-layout>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 8f1fbe1..a0ef22a 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,11 +1,11 @@
 <script setup>
-import HbAdminMenu from "../../components/HbAdminMenu.vue"
-import HbAdminHead from "../../components/HbAdminHead.vue"
-import HbAdminNav from "../../components/HbAdminNav.vue"
-import HbAdminLogo from "../../components/HbAdminLogo.vue"
-import HbAdminCopyright from "../../components/HbAdminCopyright.vue"
-import HbAdminUserCard from "../../components/HbAdminUserCard.vue"
-import HbAdminOnlineUserList from "../../components/HbAdminOnlineUserList.vue"
+import HbAdminMenu from "@/components/HbAdminMenu.vue"
+import HbAdminHead from "@/components/HbAdminHead.vue"
+import HbAdminNav from "@/components/HbAdminNav.vue"
+import HbAdminLogo from "@/components/HbAdminLogo.vue"
+import HbAdminCopyright from "@/components/HbAdminCopyright.vue"
+import HbAdminUserCard from "@/components/HbAdminUserCard.vue"
+import HbAdminOnlineUserList from "@/components/HbAdminOnlineUserList.vue"
 
 import {
   NMessageProvider,
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index cd921d6..db5b7db 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -7,7 +7,7 @@ import {
   LockOpenOutline, Person,LogoGithub,LogoWechat,LogoApple,QrCodeOutline
 } from "@vicons/ionicons5"
 import {useRouter} from "vue-router";
-import security from "../../global/security";
+import security from "@/global/security";
 import {reactive, ref} from "vue";
 
 const router = useRouter()
diff --git a/src/views/permission/index.vue b/src/views/permission/index.vue
index 027dd90..f007a2c 100644
--- a/src/views/permission/index.vue
+++ b/src/views/permission/index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import HbAdminPageLayout from "../../components/HbAdminPageLayout.vue"
+import HbAdminPageLayout from "@/components/HbAdminPageLayout.vue"
 import {
   NLayout, NLayoutSider,
   NLayoutContent,
diff --git a/src/views/point-demo/index.vue b/src/views/point-demo/index.vue
index fd8d09f..8788359 100644
--- a/src/views/point-demo/index.vue
+++ b/src/views/point-demo/index.vue
@@ -1,6 +1,6 @@
 <script setup>
 import {NLayout,NLayoutContent,NAlert,NCode,NButton,NSpace,NCard} from 'naive-ui';
-import HbAdminPageLayout from "../../components/HbAdminPageLayout.vue";
+import HbAdminPageLayout from "@/components/HbAdminPageLayout.vue";
 import hljs from 'highlight.js/lib/core'
 import javascript from 'highlight.js/lib/languages/javascript'
 import xml from 'highlight.js/lib/languages/xml'
diff --git a/src/views/quick-login/index.vue b/src/views/quick-login/index.vue
index a3f7668..5d3c12e 100644
--- a/src/views/quick-login/index.vue
+++ b/src/views/quick-login/index.vue
@@ -5,7 +5,7 @@ import {
 } from 'naive-ui'
 
 import {useRouter} from "vue-router";
-import security from "../../global/security";
+import security from "@/global/security";
 
 const router = useRouter()
 const message = useMessage()
diff --git a/src/views/role/index.vue b/src/views/role/index.vue
index 3bfadc3..43ef5fa 100644
--- a/src/views/role/index.vue
+++ b/src/views/role/index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import HbAdminPageLayout from '../../components/HbAdminPageLayout.vue'
+import HbAdminPageLayout from '@/components/HbAdminPageLayout.vue'
 import {
   NLayout, NLayoutHeader, NLayoutContent, NDataTable,
   NGrid, NGridItem, NDatePicker, NInput, NSelect, NButton, NSpace, NIcon, useMessage,
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index 4fb2990..3817c04 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import HbAdminPageLayout from '../../components/HbAdminPageLayout.vue'
+import HbAdminPageLayout from '@/components/HbAdminPageLayout.vue'
 import {
   NLayout, NLayoutHeader, NLayoutContent, NDataTable,
   NGrid, NGridItem, NDatePicker, NInput, NSelect, NButton, NSpace, NIcon, useMessage,
diff --git a/src/views/work-desk/index.vue b/src/views/work-desk/index.vue
index c824c91..6d365ea 100644
--- a/src/views/work-desk/index.vue
+++ b/src/views/work-desk/index.vue
@@ -4,7 +4,7 @@ import {
   NAvatar, NSpace, NGradientText, NIcon, NEllipsis,
   NGrid, NGridItem, NAlert
 } from "naive-ui";
-import HbAdminPageLayout from "../../components/HbAdminPageLayout.vue";
+import HbAdminPageLayout from "@/components/HbAdminPageLayout.vue";
 </script>
 <template>
   <hb-admin-page-layout>
diff --git a/vite.config.js b/vite.config.js
index 315212d..0bfe555 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,17 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [vue()],
+  resolve: {
+    alias: [
+      {
+        find:'@',
+        replacement: resolve('./src')
+      }
+    ],
+    extensions: ['.js', '.json', '.vue'] // 使用路径别名时想要省略的后缀名，可以自己 增减
+  }
 })
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..a0cc5bc
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,14 @@
+/**
+ * 由于 Vite 不再使用传统的 webpack 配置文件，故 WebStorm 无法识别别名
+ * 本文件对项目无任何作用，仅作为 WebStorm 识别别名用
+ * 进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack，选择这个文件即可
+ * */
+const resolve = dir => require('path').join(__dirname, dir);
+
+module.exports = {
+  resolve: {
+    alias: {
+      '@': resolve('src')
+    }
+  }
+};