如何使用vite-plugin-pwa开启pwa答案

【问题标题】：How to enable pwa with vite-plugin-pwa如何使用vite-plugin-pwa开启pwa
【发布时间】：2022-12-17 02:25:25
【问题描述】：

我需要开什么处方才能启用 pwa？

当我执行“分析页面加载”时，我得到的信息是 pwa is disabled。

vite.config.js

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(),
    VitePWA({
      registerType: 'autoUpdate',
      injectRegister: 'auto',
    }),
  ],
})

【问题讨论】：

标签： vue.js progressive-web-apps vite

【解决方案1】：

您是否有机会在开发中运行？

如果你想在开发中检查它，将 devOptions 选项添加到插件配置

import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      devOptions: {
        enabled: true
      }
    })
  ]
})

【讨论】：

我正在部署我的项目

【解决方案2】：

通常我在我的项目中使用的配置或多或少总是这样的：

VitePWA({
  includeAssets: ["favicon.ico", "apple-touch-icon.png", "logo.svg"],
  manifest: {
    name: "Name App",
    short_name: "Short Name",
    description: "Description",
    theme_color: "#ffffff",
    icons: [
      {
        src: "pwa-192x192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "pwa-512x512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  },
})

【讨论】：