vite-pwa-plugin 未在生产版本上获取清单-解网

问：

我在服务器上部署了一个网站，并在 vite.config.js 文件中安装并配置了插件。

当我打开网站时。我注意到清单文件似乎没有加载（在 404 中解决），但该文件存在于项目根文件夹中，如下面的屏幕截图所示。

在此处输入图像描述

正如官方文件所说

“如果构建应用程序，将在应用程序入口点上生成和配置 Web 应用清单，还将生成 Service Worker，并添加用于在浏览器中注册它的脚本/模块。”

正如我检查的那样，它会生成文件并插入指向“/manifest.webmanifest”的链接元素。

不过，该文件确实在开发模式下加载，这意味着配置可以正常工作吗？

我在配置中遗漏了什么吗？

VitePWA({  
  registerType: 'autoUpdate', 
  includeAssets: ['**/*.{png}'], 
  manifest: {  
    name: 'vite-vue-pwa',  
    short_name: 'vite-vue-pwa',  
    icons: [ 
      {  
          src: '/assets/favicon/android-chrome-96x96.png',  
          sizes: '96x96',  
          type : 'image/png'  
      }, 
      {  
          src: '/assets/favicon/android-chrome-192x192.png',  
          sizes: '192x192',  
          type : 'image/png'  
      }, 
      {  
          src: '/assets/favicon/android-chrome-512x512.png',  
          sizes: '512x512',  
          type: 'image/png', 
          purpose: 'any' 
      }, 
    ],  
    theme_color: '#000000',  
    background_color: '#000000',  
    display: 'standalone'  
  },  
  devOptions: { enabled: true },  
  workbox: {  
    cleanupOutdatedCaches: true,  
    globPatterns: ['**/*.{js,css,html,ico,jpg,json,png,txt,svg}'], 
    runtimeCaching: [  
      {  
        urlPattern: ({ url }) => url.pathname.startsWith('/api'),  
        handler: 'NetworkFirst',  
        options: {  
          cacheName: 'api-cache', 
          cacheableResponse: { statuses: [0, 200] } 
        }  
      } 
    ]
   }
 }]

progressive-web-apps vite 清单

vite-pwa-plugin 未在生产版本上获取清单

vite-pwa-plugin not fetching manifest on production build

评论