javascript - 无法在带有 nuxt.js 应用程序的书签中显示 apple-touch-icon

Question

我有一个网站temp-mail.io .我有 apple-touch-icon.png适用于 Apple 设备。我的图标是:

没有透明度的 180x180 PNG 图像；

位于网站的根目录(可通过 /apple-touch-icon.png 获得)。

前段时间，我将我的网站从 vanilla Vue 切换到 nuxt.js 以进行服务器端渲染 (SSR)。现在我的苹果触摸图标没有显示在书签中(仅在主屏幕上作为网络应用程序)。

我花了很多时间来寻找错误。我试图:

更改图标位置和名称；

将图标更改为另一个图像；

使用 sizes 添加更多 apple-touch-icon属性;

为其他图标、网站图标添加更多尺寸；

通过在线图标检查器检查图标(他们报告我一切都很好)；

使用 nuxt.config.js 进行操作: 更改选项顺序，添加 build.extractCSS: true属性(我试图找出我的网站和使用 nuxt.js 的其他网站之间的区别)；

在装有 iOS 13 的 iPhone 8 和 iPhone SE 上进行了检查。在装有 iOS 12 的 iPad 上进行了检查。

但我无法在书签中获得 apple-touch-icon。
昨天我发现有类似问题的网站:

https://hn-spa.nuxtjs.org (SPA版)

https://hn.nuxtjs.org

两个网站都很相似。但是＃1作为SPA工作。 #2 与我的网站类似。

和#1 有一个图标当我尝试将其保存到书签( screenshot )时。 #2 没有图标 ( screenshot)。我不明白为什么。

我的问题:如何在书签中显示 apple-touch-icon？

附:我总是在设置中使用“清除历史记录和数据”。并且总是试图重复添加多次。

nuxt.js 版本是 2.11.0。

apple-touch-icon 添加到 nuxt.config.js至 head.link :

{ rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }

我也在使用 @nuxtjs/pwa@3.0.0-0 ，但我在 nuxt.config.js 中禁用了网站图标属性使用自定义网站图标: pwa.meta.favicon: false .

Answer 1

我是真澄
我刚刚修复了同样的错误，以便分享我的提示!
1. 编辑图标路径为/static/apple-touch-icon.png .
(另外，我文件的尺寸是 512 × 512px )
2. 编辑您的nuxt.config.js文件的头代码如下。

 head: {
    titleTemplate: '%s',
    title: 'App Name',
    meta: [
      // [Things you are currently setting]
      {
        name: 'apple-mobile-web-app-capable',
        content: 'yes'
      },
      {
        name: 'apple-mobile-web-app-status-bar-style',
        content: 'black-translucent'
      },
    ],
    link: [
      // [Things you are currently setting]
      {
        rel: 'apple-touch-icon',
        type: 'image/png',
        href: 'https://www.sample.com/apple-touch-icon.png' // [your-domain]
      }
    ]
  },

3.卸载@nuxtjs/pwa并删除相关代码。
如果还是不能解决问题，可以通过卸载包( npm uninstall @nuxtjs/pwa)来解决。如果卸载PWA包，需要去掉 modules中的代码等相关代码.
这个答案可能不适合你的解决方案，但如果它对你有帮助，我会很高兴:)