为什么我的PWA在Standalone模式下没有显示启动图标？

Tr° 文明提问于 2026-02-15 11:04:27 阅读 18

移动

我在Vue项目里配置了PWA的manifest文件，手机添加到主屏幕后虽然能全屏运行，但点击图标时左上角还是会出现系统状态栏，感觉没完全进入Standalone模式。之前按照教程设置了以下代码，但问题依旧存在：


<!-- public/manifest.json -->
{
  "name": "MyApp",
  "short_name": "MyApp",
  "start_url": "/index.html",
  "display": "standalone",
  "icons": [{
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}

手机测试时发现图标文件路径没问题，浏览器应用安装提示也正常，但运行时总感觉不像官方文档说的那样完全独立。是不是还需要额外配置什么参数？或者和Vue的路由设置有关？

PWA移动

我来解答赞 5 收藏

反馈

1 条解答

UP主～艳丽 Lv1

应该是 start_url 配置有问题，改成根路径试试。还有，检查下服务器是否正确返回了 manifest.json 的 MIME 类型，必须是 application/manifest+json。最后确认下 Vue 路由的 base 配置是否和 start_url 一致。

{

  "name": "MyApp",

  "short_name": "MyApp",

  "start_url": "/",

  "display": "standalone",

  "icons": [{

    "src": "/icons/icon-192x192.png",

    "sizes": "192x192",

    "type": "image/png"

  }]

}

另外，确保你的 service worker 没有缓存旧的 manifest 文件，清除缓存重新测试一遍。

2026-02-15 11:05