diff --git a/.env b/.env
new file mode 100644
index 0000000..b995432
--- /dev/null
+++ b/.env
@@ -0,0 +1,4 @@
+# 所有环境自定义的环境变量（命名必须以 VITE_ 开头）
+
+## 项目标题
+VITE_APP_TITLE = V3 Admin Vite
diff --git a/.env.development b/.env.development
index 44ad886..12bc1e2 100644
--- a/.env.development
+++ b/.env.development
@@ -1,4 +1,4 @@
-# 自定义的环境变量（命名必须以 VITE_ 开头）
+# 开发环境自定义的环境变量（命名必须以 VITE_ 开头）
## 后端接口公共路径（如果解决跨域问题采用反向代理就只需写公共路径）
VITE_BASE_API = '/api/v1'
diff --git a/.env.production b/.env.production
index ec4f8d0..9b53b44 100644
--- a/.env.production
+++ b/.env.production
@@ -1,4 +1,4 @@
-# 自定义的环境变量（命名必须以 VITE_ 开头）
+# 生产环境自定义的环境变量（命名必须以 VITE_ 开头）
## 后端接口公共路径（如果解决跨域问题采用 CORS 就需要写全路径）
# VITE_BASE_API = 'https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1'
diff --git a/.env.staging b/.env.staging
index ec4f8d0..47f66ac 100644
--- a/.env.staging
+++ b/.env.staging
@@ -1,4 +1,4 @@
-# 自定义的环境变量（命名必须以 VITE_ 开头）
+# 预发布环境自定义的环境变量（命名必须以 VITE_ 开头）
## 后端接口公共路径（如果解决跨域问题采用 CORS 就需要写全路径）
# VITE_BASE_API = 'https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1'
diff --git a/index.html b/index.html
index 20cf850..a9f0259 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,11 @@
-
+
- V3 Admin Vite
+ %VITE_APP_TITLE%
diff --git a/src/hooks/useTitle.ts b/src/hooks/useTitle.ts
new file mode 100644
index 0000000..91a7118
--- /dev/null
+++ b/src/hooks/useTitle.ts
@@ -0,0 +1,23 @@
+import { ref, watch } from "vue"
+
+/** 项目标题 */
+const VITE_APP_TITLE = import.meta.env.VITE_APP_TITLE ?? "V3 Admin Vite"
+
+/** 动态标题 */
+const dynamicTitle = ref("")
+
+/** 设置标题 */
+const setTitle = (title?: string) => {
+ dynamicTitle.value = title ? `${VITE_APP_TITLE} | ${title}` : VITE_APP_TITLE
+}
+
+/** 监听标题变化 */
+watch(dynamicTitle, (value, oldValue) => {
+ if (document && value !== oldValue) {
+ document.title = value
+ }
+})
+
+export function useTitle() {
+ return { setTitle }
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index 8203bff..614c8d2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -71,7 +71,7 @@ export const constantRoutes: RouteRecordRaw[] = [
component: () => import("@/views/unocss/index.vue"),
name: "UnoCSS",
meta: {
- title: "unocss",
+ title: "原子 CSS",
svgIcon: "unocss"
}
}
@@ -207,7 +207,7 @@ export const constantRoutes: RouteRecordRaw[] = [
redirect: "/hook-demo/use-fetch-select",
name: "HookDemo",
meta: {
- title: "hook 示例",
+ title: "Hook 示例",
elIcon: "Menu",
alwaysShow: true
},
diff --git a/src/router/permission.ts b/src/router/permission.ts
index c38b91d..247a9d1 100644
--- a/src/router/permission.ts
+++ b/src/router/permission.ts
@@ -3,6 +3,7 @@ import { useUserStoreHook } from "@/store/modules/user"
import { usePermissionStoreHook } from "@/store/modules/permission"
import { ElMessage } from "element-plus"
import { setRouteChange } from "@/hooks/useRouteListener"
+import { useTitle } from "@/hooks/useTitle"
import { getToken } from "@/utils/cache/cookies"
import { fixBlankPage } from "@/utils/fix-blank-page"
import routeSettings from "@/config/route"
@@ -10,6 +11,7 @@ import isWhiteList from "@/config/white-list"
import NProgress from "nprogress"
import "nprogress/nprogress.css"
+const { setTitle } = useTitle()
NProgress.configure({ showSpinner: false })
router.beforeEach(async (to, _from, next) => {
@@ -73,6 +75,7 @@ router.afterEach((to) => {
setRouteChange(to)
})
-router.afterEach(() => {
+router.afterEach((to) => {
+ setTitle(to.meta.title)
NProgress.done()
})
diff --git a/types/env.d.ts b/types/env.d.ts
index e27ac22..288f104 100644
--- a/types/env.d.ts
+++ b/types/env.d.ts
@@ -1,5 +1,6 @@
/** 声明 vite 环境变量的类型（如果未声明则默认是 any） */
declare interface ImportMetaEnv {
+ readonly VITE_APP_TITLE: string
readonly VITE_BASE_API: string
readonly VITE_ROUTER_HISTORY: "hash" | "html5"
readonly VITE_PUBLIC_PATH: string