VitePWA插件未更新manifest图标路径及子页面路径适配问题

1. 同步Manifest图标与打包后带Hash的路径 #

你可以通过两种方式解决图标路径不匹配的问题：

方式一：让vite-plugin-pwa自动处理图标 #

如果你的图标已符合标准尺寸，直接配置插件自动生成和管理图标路径，无需手动编写manifest里的图标项：

import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    VitePWA({
      manifest: {
        name: '你的站点名称',
        short_name: '短名称',
        start_url: '/',
        display: 'standalone',
        background_color: '#ffffff',
        theme_color: '#41b883'
      },
      // 自动生成多尺寸图标并同步路径
      icon: {
        src: 'img/icons/chrome192.png', // 主图标源文件
        sizes: [192, 512] // 需要生成的图标尺寸
      }
    })
  ]
})

插件会自动将图标打包到assets目录，同时更新manifest里的图标路径为带Hash的正确地址。

方式二：自定义转换Manifest路径 #

如果需要保留自己的图标文件，用transformManifest钩子结合Vite生成的资源映射文件来替换路径：

import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
import fs from 'fs'

export default defineConfig({
  build: {
    manifest: true // 生成Vite资源映射文件manifest.json
  },
  plugins: [
    VitePWA({
      manifest: {
        // ...其他manifest配置
        icons: [
          { src: 'img/icons/chrome192.png', sizes: '192x192', type: 'image/png' },
          { src: 'img/icons/chrome512.png', sizes: '512x512', type: 'image/png' }
          // 其他图标配置
        ]
      },
      transformManifest: (manifest) => {
        // 读取Vite生成的资源映射文件
        const viteManifest = JSON.parse(fs.readFileSync('./dist/manifest.json', 'utf-8'))
        
        // 替换每个图标的路径为打包后的带Hash地址
        manifest.icons = manifest.icons.map(icon => {
          const assetKey = icon.src.replace(/^\//, '')
          const asset = viteManifest[assetKey]
          if (asset) {
            return { ...icon, src: `/${asset.file}` }
          }
          return icon
        })
        return manifest
      }
    })
  ]
})

2. 修复子页面Manifest引用路径 #

子页面用相对路径./manifest.webmanifest无法访问根目录的manifest，直接改用绝对路径即可：

方式一：通过插件配置自动注入绝对路径 #

在vite.config.js里设置manifestUrl为绝对路径：

VitePWA({
  // ...其他配置
  manifestUrl: '/manifest.webmanifest' // 根路径开头的绝对地址
})

插件会自动在所有页面的HTML中注入正确的manifest引用。

方式二：手动在HTML模板中添加 #

如果插件自动注入有问题，直接在所有HTML文件（包括子页面）的<head>里添加：

<link rel="manifest" href="/manifest.webmanifest">

这样不管页面在哪个子目录，都能正确指向根目录下的manifest文件。

注意：如果你的站点部署在子路径（比如https://example.com/my-app/），需要把Vite的base配置设为'/my-app/'，同时manifestUrl改为'/my-app/manifest.webmanifest'。

内容的提问来源于stack exchange，提问作者Richard Djarbeng