跳至主要內容

Nuxt整合PWA


Nuxt整合PWA

安装插件

pnpm add -D @vite-pwa/nuxt

配置 nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/tailwind.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  modules: ['@vite-pwa/nuxt'],
  pwa: {
    // 設定是否有更新時自動更新,因為我的網站只是單純展示用,直接設定autoUpdate。
    registerType: 'autoUpdate',
    // 設定是否要在開發的時候(npm run dev)啟用pwa功能,為了方便測試,我是把他開啟。
    devOptions: {
      enabled: true,
    },
    // pwa的描述檔
    manifest: {
      name: '小企鹅笔记',
      short_name: 'Q记',
      description: '小企鹅笔记',
      lang: 'zh',
      theme_color: '#000000',
    }
  }
})

在 app.vue 加入NuxtPwaManifest

上次编辑于:
你认为这篇文章怎么样?
  • 0
  • 0
  • 0
  • 0
  • 0
  • 0
评论
  • 按正序
  • 按倒序
  • 按热度