vue3+vite项目中启用pwa

步骤

添加依赖

npm i vite-pwa-plugin -D

修改配置

vite.config.ts

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({
    
    
            manifest: {
    
    
            	// 安装应用后显示的应用名
                name: "应用名称",
                description: "应用描述",
                // 至少配置一个图标
                icons: [{
    
    
                	// 注意如果应用不是部署在站点根目录则需要相对路径，图片文件放在项目/public/pwa/192x192.png
                    src: "./pwa/192x192.png",
                    sizes: "192x192",
                    type: "image/png"
                }]
            },
            registerType: "autoUpdate",
            workbox: {
    
    
            	// 对所有匹配的静态资源进行缓存
                globPatterns: ["**/*.{js,css,html,ico,png,svg}"],
            },
            devOptions: {
    
    
                enabled: true
            }
        })
    ],
    base: './'
})

生成应用图标

https://realfavicongenerator.net/

插件官方文档

https://vite-pwa-org.netlify.app/