增加打包为离线web应用配置

vite.config.js

@@ -1,25 +1,99 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [vue()],
-  resolve: {
-    alias: {
-      '@': '/src'
-    }
-  },
-  server: {
-    port: 3000
-  },
-  build: {
-    rollupOptions: {
-      output: {
-        // 为CSS和JS文件添加哈希后缀
-        entryFileNames: 'assets/[name].[hash].js',
-        chunkFileNames: 'assets/[name].[hash].js',
-        assetFileNames: 'assets/[name].[hash].[ext]'
-      }
-    }
+export default defineConfig(({ mode }) => {
+  const isPwaMode = mode === 'pwa'
+
+  const plugins = [vue()]
+
+  // 只在PWA模式下添加PWA插件
+  if (isPwaMode) {
+    plugins.push(
+      VitePWA({
+        registerType: 'autoUpdate',
+        devOptions: {
+          enabled: false,
+        },
+        manifest: {
+          name: '锤子便签',
+          short_name: '便签',
+          description: '锤子便签(重制版)',
+          theme_color: '#42b883',
+          start_url: '/',
+          display: 'standalone',
+          background_color: '#ffffff',
+          icons: [
+            {
+              src: 'icons/icon-192.png',
+              sizes: '192x192',
+              type: 'image/png',
+            },
+            {
+              src: 'icons/icon-512.png',
+              sizes: '512x512',
+              type: 'image/png',
+            },
+          ],
+        },
+        workbox: {
+          globPatterns: ['**/*.{js,css,html,wasm,png,jpg,jpeg,svg,ico}'],
+          runtimeCaching: [
+            {
+              urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+              handler: 'CacheFirst',
+              options: {
+                cacheName: 'google-fonts-cache',
+                expiration: {
+                  maxEntries: 10,
+                  maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+                },
+                cacheableResponse: {
+                  statuses: [0, 200],
+                },
+              },
+            },
+            {
+              urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+              handler: 'CacheFirst',
+              options: {
+                cacheName: 'gstatic-fonts-cache',
+                expiration: {
+                  maxEntries: 10,
+                  maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
+                },
+                cacheableResponse: {
+                  statuses: [0, 200],
+                },
+              },
+            },
+          ],
+        },
+      })
+    )
   }
-})
+
+  return {
+    plugins,
+    resolve: {
+      alias: {
+        '@': '/src',
+      },
+    },
+    server: {
+      port: 3000,
+    },
+    build: {
+      outDir: isPwaMode ? 'dist/offline' : 'dist/standard',
+      rollupOptions: {
+        output: {
+          // 为CSS和JS文件添加哈希后缀
+          entryFileNames: 'assets/[name].[hash].js',
+          chunkFileNames: 'assets/[name].[hash].js',
+          assetFileNames: 'assets/[name].[hash].[ext]',
+        },
+      },
+    },
+  }
+})