新增pwa

mail-vue/vite.config.js

@@ -1,37 +1,60 @@
-import {defineConfig,loadEnv} from 'vite'
+import {defineConfig, loadEnv} from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
+import {VitePWA} from 'vite-plugin-pwa';
 
 export default defineConfig(({mode}) => {
-  const env = loadEnv(mode, process.cwd(), 'VITE')
-  return {
-    server: {
-      host: true,
-      port: 3001,
-      hmr: true,
-    },
-    base: env.VITE_STATIC_URL || '/',
-    plugins: [vue(),
-      AutoImport({
-        resolvers: [ElementPlusResolver()],
-      }),
-      Components({
-        resolvers: [ElementPlusResolver()],
-      })
-    ],
-    resolve: {
-      alias: {
-        '@': path.resolve(__dirname, 'src')
-      }
-    },
-    build: {
-      target: 'es2022',
-      outDir: env.VITE_OUT_DIR || 'dist',
-      emptyOutDir: true,
-      assetsInclude: ['**/*.json']
+    const env = loadEnv(mode, process.cwd(), 'VITE')
+    return {
+        server: {
+            host: true,
+            port: 3001,
+            hmr: true,
+        },
+        base: env.VITE_STATIC_URL || '/',
+        plugins: [vue(),
+            VitePWA({
+                registerType: 'autoUpdate',  // 配置 service worker 的注册方式
+                includeAssets: ['favicon.svg', 'robots.txt'],  // 指定需要包含的静态资源
+                manifest: {
+                    name: 'Cloud Mail',
+                    short_name: 'Cloud Mail',
+                    background_color: '#FFFFFF',
+                    theme_color: '#FFFFFF',
+                    icons: [
+                        {
+                            src: 'mail-192.png',//像素尺寸一定要对应
+                            sizes: '192x192',
+                            type: 'image/png',
+                        },
+                        {
+                            src: 'mail-512.png',
+                            sizes: '512x512',
+                            type: 'image/png',
+                        },
+                    ],
+                },
+            }),
+            AutoImport({
+                resolvers: [ElementPlusResolver()],
+            }),
+            Components({
+                resolvers: [ElementPlusResolver()],
+            })
+        ],
+        resolve: {
+            alias: {
+                '@': path.resolve(__dirname, 'src')
+            }
+        },
+        build: {
+            target: 'es2022',
+            outDir: env.VITE_OUT_DIR || 'dist',
+            emptyOutDir: true,
+            assetsInclude: ['**/*.json']
+        }
     }
-  }
 })