refactor: 降低 PWA 配置的硬编码

un-pany · Mar 5, 2025 · 974a522 · 974a522
1 parent bc2fca9
commit 974a522
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
diff --git a/.env b/.env
@@ -8,3 +8,9 @@ VITE_ROUTER_HISTORY = hash
 
 ## 是否开启 console 调试工具
 VITE_CONSOLE = true
+
+## PWA - 简介
+VITE_PWA_DESCRIPTION = A crafted mobile template
+
+## PWA - 主题色
+VITE_PWA_THEME_COLOR = "#ffffff"
diff --git a/index.html b/index.html
@@ -6,8 +6,8 @@
       name="viewport"
       content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
     />
-    <meta name="description" content="A crafted mobile template" />
-    <meta name="theme-color" content="#ffffff" />
+    <meta name="description" content="%VITE_PWA_DESCRIPTION%" />
+    <meta name="theme-color" content="%VITE_PWA_THEME_COLOR%" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="icon" href="/favicon.png" type="image/png" />
     <link rel="stylesheet" href="/app-loading.css" />

diff --git a/types/env.d.ts b/types/env.d.ts
@@ -1,9 +1,11 @@
 /** 声明 vite 环境变量的类型（如果未声明则默认是 any） */
 interface ImportMetaEnv {
   readonly VITE_APP_TITLE: string
-  readonly VITE_BASE_URL: string
-  readonly VITE_CONSOLE: "true" | "false"
   readonly VITE_ROUTER_HISTORY: "hash" | "html5"
+  readonly VITE_CONSOLE: "true" | "false"
+  readonly VITE_PWA_DESCRIPTION: string
+  readonly VITE_PWA_THEME_COLOR: string
+  readonly VITE_BASE_URL: string
   readonly VITE_PUBLIC_PATH: string
 }
 

diff --git a/vite.config.ts b/vite.config.ts
@@ -13,7 +13,7 @@ import svgLoader from "vite-svg-loader"
 
 // Configuring Vite: https://cn.vite.dev/config
 export default defineConfig(({ mode }) => {
-  const { VITE_PUBLIC_PATH } = loadEnv(mode, process.cwd(), "") as ImportMetaEnv
+  const { VITE_PUBLIC_PATH, VITE_APP_TITLE, VITE_PWA_DESCRIPTION, VITE_PWA_THEME_COLOR } = loadEnv(mode, process.cwd(), "") as ImportMetaEnv
   return {
     // 开发或打包构建时用到的公共基础路径
     base: VITE_PUBLIC_PATH,
@@ -127,10 +127,10 @@ export default defineConfig(({ mode }) => {
       VitePWA({
         includeAssets: ["favicon.png", "apple-touch-icon.png"],
         manifest: {
-          name: "MobVue",
-          short_name: "MobVue",
-          description: "A crafted mobile template",
-          theme_color: "#ffffff",
+          name: VITE_APP_TITLE,
+          short_name: VITE_APP_TITLE,
+          description: VITE_PWA_DESCRIPTION,
+          theme_color: VITE_PWA_THEME_COLOR,
           icons: [
             {
               src: "pwa-192x192.png",