此页内容

Vue3开启PWA

耶温

399字约1分钟

2024-06-12

Vue3开启PWA

提示

PWA只有在 localhostHTTPS 下才回被启用

创建项目

使用vite命令创建Vue项目

npm init vite@lastet

根据提示按步骤创建 vite + vue项目

完成之后,下载依赖,启动项目。

下载插件

下载pwa插件

npm install -D vite-plugin-pwa

使用插件

vite.config.js中设置如下:

  1. 导入插件
import { VitePWA } from 'vite-plugin-pwa'
  1. 配置设置
  • manifest:应用清单,设置pwa信息
  • injectRegister:注册Service Worker方式
  • workbox:Service Worker具体设置
    • globPatterns:缓存文件设置,正则匹配
  • devOptions:开发环境设置
    • enabled:是否启用pwa
export default defineConfig({
  plugins: [   
    VitePWA({ 
      // 应用清单
      manifest: {
        name: 'Vite PWA',
        short_name: 'Vite',
        description: 'Vite PWA APP',
        theme_color: '#ccc',
        icons: [
          {
            src: 'logo.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      },
      // 注册ws方式
      injectRegister: 'auto',
      // 设置缓存资源
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg,json,jpg,jpeg}']
      },
      //dev环境也开启pwa
      devOptions: {
        enabled: true
      }
    })
  ],
})
  1. 设置完成后vite.config.js完整代码如下:
点击查看
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  base:'/pwa',
  plugins: [   
    vue(), 
    VitePWA({ 
      // 应用清单
      manifest: {
        name: 'Vite PWA',
        short_name: 'Vite',
        description: 'Vite PWA APP',
        theme_color: '#ccc',
        icons: [
          {
            src: 'logo.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      },
      // 注册ws方式
      injectRegister: 'auto',
      // 设置缓存资源
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg,json,jpg,jpeg}']
      },
      //dev环境也开启pwa
      devOptions: {
        enabled: true
      }
    })
  ],
})

效果展示

  1. 本地测试环境

alt text

  1. 正式环境

alt text

更多设置

提示

更多详细设置可以前往插件官方文档查看:https://vite-pwa-org.netlify.app/

点击前往