vue3+vite项目中启用pwa

路过君

发布于 2023-04-21 20:15:53

8470

发布于 2023-04-21 20:15:53

文章被收录于专栏：路过君BLOG from CSDN路过君BLOG from CSDN

步骤

添加依赖

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: './'
})