Vue 3 项目配置 VitePWA 实现离线能力只需三步：安装 vite-plugin-pwa 插件、配置 vite.config.ts（含 autoUpdate、includeAssets、manifest 及图标）、将 192x192/512x512 PNG 图标等文件放入 public 目录，插件自动处理 manifest.json 和 Service Worker。

Vue 3 项目初始化后配置 VitePWA 实现离线能力，核心就三步：装插件、配 vite.config.ts、放图标。不需要手写 Service Worker，也不用自己生成 manifest.json，VitePWA 会全自动处理。

安装 vite-plugin-pwa 插件

在已创建好的 Vue 3 + Vite 项目根目录下执行：

• npm install vite-plugin-pwa --save-dev（推荐使用 npm 或 pnpm）
• 如果需要手动触发更新提示或监听离线状态，可额外加装：npm install workbox-window --save-dev

配置 vite.config.ts（或 .js）

打开项目根目录的 vite.config.ts，引入并注册插件，关键配置项如下：

• registerType: 'autoUpdate' —— 页面加载时自动检查并更新 Service Worker
• includeAssets —— 指定要缓存的静态资源，如 ['favicon.ico', 'robots.txt']
• manifest —— 定义 PWA 元信息，包括名称、图标路径、主题色等
• icons 必须提供至少两个尺寸：192x192 和 512x512 PNG 图标，放在 public/ 目录下（如 public/pwa-192x192.png）

示例片段：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
  plugins: [
    // ...其他插件
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico'],
      manifest: {
        name: 'My App',
        short_name: 'App',
        icons: [
          { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
          { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' }
        ]
      }
    })
  ]
})

确保图标和基础文件就位

VitePWA 会自动生成 manifest.json 和 sw.js，但以下文件需你手动准备并放入 public/ 目录：

• pwa-192x192.png 和 pwa-512x512.png（必须，尺寸严格匹配）
• favicon.ico（建议添加，提升兼容性）
• robots.txt（可选，若配置了 includeAssets）

注意：开发阶段用 localhost 即可测试；上线必须部署在 HTTPS 环境，否则 Service Worker 不会激活。

验证是否生效

运行 npm run build && npm run preview 后，在 Chrome 或 Edge 中打开：

• F12 打开开发者工具 → Application 标签页 → 查看 Manifest 和 Service Worker 是否注册成功
• Network 面板切换为 Offline，刷新页面，确认核心功能（如首页、静态内容）仍可加载
• 地址栏右侧出现“安装”图标，点击即可添加到桌面

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！