Vue3 项目生成PWA

在Vue 3中生成PWA需要使用Vite作为构建工具，并配置Vue的插件。以下是PWA的步骤和示例代码：

一、创建Vue 3项目：

npm create vue@latest
# 或者
yarn create vue

二、 在项目创建过程中，选择需要的配置，并且确保选中了PWA选项。

• 配置vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入自动生成service worker的插件
import { VitePWA } from 'vite-plugin-pwa'
 
// 配置PWA的相关选项
const pwaConfig = {
  strategies: 'generate',
  srcDir: 'src',
  filename: 'service-worker.js',
  injectRegister: true,
  registerType: 'autoUpdate',
  includeAssets: ['favicon.ico', 'robots.txt', 'sitemap.xml'],
  manifest: {
    name: 'Your App Name',
    short_name: 'Your App',
    theme_color: '#ffffff',
    background_color: '#ffffff',
    display: 'standalone',
    scope: '/',
    start_url: '/',
    icons: [
      {
        src: 'path/to/icon.png',
        sizes: '192x192',
        type: 'image/png'
      },
      // ... 其他图标大小
    ]
  }
}
 
export default defineConfig({
  plugins: [
    vue(),
    VitePWA(pwaConfig)
  ]
})

三、 运行Vite开发服务器：

直接执行npm run dev, 很可能测不出PWA的效果， 建议执行npm run build命令进行打包， 打包时 会生产PWA的 配置文件， 然后直接在dist 目录起服务即可；

当用户从浏览器 将页面添加到主屏幕， 点击主屏幕图标打开，此时进入到不在时浏览器页面， 而是一个独立的APP页面；

四、以上配置项比较简陋， 更多详细请看管我： vite-pwa-org.netlify.app/