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

Posted 2023-02-22

【中文标题】无法在带有 nuxt.js 应用程序的书签中显示 apple-touch-icon

【英文标题】：Cannot show apple-touch-icon in bookmarks with nuxt.js app

【发布时间】：2020-04-15 01:22:39

【问题描述】：

我有一个网站temp-mail.io。我有苹果设备的apple-touch-icon.png。我的图标是：

180x180 不透明的 PNG 图像； 位于网站的根目录（可通过/apple-touch-icon.png 获得）。

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

我花了很多时间来查找错误。我想：

更改图标位置和名称； 将图标更改为另一张图片； 添加更多带有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 与我的网站类似。

当我尝试将其保存到书签 (screenshot) 时，#1 有一个图标。 #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。

【参考方案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中的代码等相关代码。

此答案可能不适合您的解决方案，但如果对您有帮助，我将非常高兴:)

【讨论】：

感谢您的回答，但我已经尝试了所有这些，但对我没有帮助

【参考方案2】：

如果可以，请将www. 子域添加到您的页面网址，而不是图标。我没有找到任何其他解决方案。

【参考方案3】：

Masumi's answer 引导我走向正确的方向。

我尝试使用 @nuxt/pwa 包，同时与 apple-touch-icon 作斗争。 Safari 没有显示。将此添加到nuxt.config.js 解决了这个问题；

  head: 
    ...
    link: [
      ...
      
        rel: "apple-touch-icon",
        type: "image/png",
        href: "/icon.png" //If Icon is inside @/assets/ folder or available at '/...'
      
    ]
  ,

注意 Nuxt 中的资产默认映射到 '/'。所以资产文件夹中的icon.png 将是www.domain.com/icon.png。 如果位置在其他地方，请关注Masumi's answer。

如果使用@nuxt/pwa

尝试禁用meta-favicon 选项，因为它会生成自己的apple-touch-icon 链接。

pwa: 
  meta: 
    favicon: false
  

将@nuxt/pwa 图标与source 选项一起使用对我没有帮助。