PWA

安装插件

npx nuxi@latest module add @vite-pwa/nuxt

nuxt.config.ts 配置

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: [
    '@vite-pwa/nuxt'
  ],
    pwa: {
        strategies: sw ? 'injectManifest' : 'generateSW',
        srcDir: sw ? 'service-worker' : undefined,
        filename: sw ? 'sw.ts' : undefined,
        registerType: 'autoUpdate',
        manifest: {
            theme_color: '#000000',
            name: 'DigVPS',
            short_name: 'DigVPS',
            description: '专注 VPS 测评',
            icons: [
                {
                    src: '/logo-192.png',
                    sizes: '192x192',
                    type: 'image/png'
                },
                {
                    src: '/logo-512.png',
                    sizes: '512x512',
                    type: 'image/png'
                }
            ]
        },
        workbox: {
            globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
            maximumFileSizeToCacheInBytes: 5000000

        },
        injectManifest: {
            globPatterns: ['**/*.{js,css,html,png,svg,ico}']
        },
        // client: {
        //   installPrompt: true,
        //   // you don't need to include this: only for testing purposes
        //   // if enabling periodic sync for update use 1 hour or so (periodicSyncForUpdates: 3600)
        //   periodicSyncForUpdates: 60
        // },
        devOptions: {
            enabled: true,
            suppressWarnings: true,
            navigateFallback: '/',
            navigateFallbackAllowlist: [/^\/$/],
            type: 'module'
        }
    },
})

app.vue 配置

加个组建即可

 <NuxtPwaManifest />