Vite PWA-Plugin生成的manifest.webmanifest本地不可见如何编辑？

问题原因 #

Vite PWA-Plugin默认会动态生成manifest.webmanifest并在内存中托管，不会将文件写入本地磁盘，所以你在文件管理器、VS Code里找不到它；手动创建的同名文件会被插件的动态生成内容覆盖，自然无法生效。

解决方法 #

1. 让插件将生成的manifest写入本地磁盘

在vite.config.js/ts中修改PWA插件配置，开启writeToDisk: true，同时可以直接在配置里定义manifest内容：

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

export default {
  plugins: [
    VitePWA({
      manifest: {
        name: '你的应用名称',
        short_name: '应用简称',
        start_url: '/',
        display: 'standalone',
        icons: [
          {
            src: '/icons/icon-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          }
          // 其他图标配置
        ]
      },
      writeToDisk: true // 关键配置：将生成的manifest写入本地磁盘
    })
  ]
}

开启后，插件会把生成的manifest.webmanifest写入你的项目输出目录（开发环境通常在.vite文件夹，生产环境在dist文件夹），你可以直接编辑这个文件，重启服务后生效。

2. 使用本地manifest文件作为源

如果你更习惯编辑本地文件而非在代码里配置，可在src目录下创建manifest.webmanifest，然后在插件配置中指定读取该文件：

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

export default {
  plugins: [
    VitePWA({
      manifest: './src/manifest.webmanifest', // 指定本地manifest文件路径
      writeToDisk: true
    })
  ]
}

之后你只需编辑src/manifest.webmanifest，插件会自动读取并处理，同时将最终文件写入磁盘，浏览器访问的内容会和你编辑的保持一致。

3. 注意事项

• 不要在项目根目录直接创建manifest.webmanifest，避免和插件生成的文件冲突
• 修改配置后必须重启Vite开发服务，确保配置生效
• 生产构建时，插件会自动将manifest打包到dist目录，无需额外操作

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