Vite-PWA-Plugin生产构建时manifest文件无法加载（404）问题排查

根据你描述的情况，开发环境正常、生产构建后文件存在但访问404，大概率是服务器配置或Vite基础路径配置的问题，以下是具体排查和修复方案：

1. 检查Vite的base配置是否匹配部署路径 #

如果你的网站部署在域名的子路径下（比如https://your-domain.com/app/），但Vite默认base为/，会导致manifest的请求路径错误。

打开vite.config.js，添加或修改base配置：

export default defineConfig({
  base: '/app/', // 替换为实际部署子路径，根目录则保留'/'
  plugins: [
    // ... VitePWA 配置
  ]
})

重新构建部署后，确认页面中link标签的href是否变为对应子路径下的/app/manifest.webmanifest。

2. 检查服务器的静态文件服务配置 #

2.1 配置.webmanifest的MIME类型 #

部分服务器默认不识别.webmanifest扩展名，需手动关联MIME类型：

• Nginx：在配置文件中添加

types {
  text/manifest webmanifest;
}

• Apache：在.htaccess或配置文件中添加

AddType text/manifest .webmanifest

• 其他服务器（如Caddy、Node.js静态服务）：对应配置MIME映射，将.webmanifest关联到text/manifest类型。

2.2 确保静态资源优先匹配 #

若SPA使用前端路由（如Vue Router的history模式），服务器通常会配置请求 fallback 到index.html，但需确保静态资源（包括manifest.webmanifest）被优先匹配：

• Nginx示例配置：

location / {
  try_files $uri $uri/ /index.html;
}

try_files $uri会优先查找存在的静态文件，仅当文件不存在时才返回index.html，保证manifest.webmanifest能被正确返回。

3. 验证VitePWA的manifest输出配置 #

默认情况下VitePWA会将manifest.webmanifest生成在构建产物根目录，可手动确认输出配置：

VitePWA({
  // ... 其他配置
  manifest: {
    // ... 你的manifest内容
  },
  manifestFilename: 'manifest.webmanifest', // 确认文件名
  outDir: 'dist' // 匹配Vite的build.outDir配置
})

重新构建后，检查dist目录下是否存在manifest.webmanifest且内容正确。

4. 清除浏览器缓存和Service Worker #

生产环境可能存在旧缓存拦截请求：

• 打开浏览器开发者工具 → Application → Service Workers → 点击Unregister
• 清除浏览器缓存（Ctrl+Shift+Del）后重新加载页面。

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