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

Question

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

\n\n

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

\n\n

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

\n\n

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

\n\n

\n
• 更改图标位置和名称；
\n
• 将图标更改为其他图像；
\n
• 添加更多具有属性的 apple-touch-icon sizes；
\n
• 为其他图标、网站图标添加更多尺寸；
\n
• 通过在线图标检查器检查图标（他们报告我一切都很好）；
\n
• 操作nuxt.config.js：更改选项顺序，添加build.extractCSS: true属性（我试图找到我的网站和使用 nuxt.js 的其他网站之间的区别）；
\n
• 在装有 iOS 13 的 iPhone 8 和 iPhone SE 上进行了检查。在装有 iOS 12 的 iPad 上进行了检查。
\n

\n\n

但我无法\xe2\x80\x99在书签中获得apple-touch-icon。\n昨天我发现网站有类似的问题：

\n\n

\n
1. https://hn-spa.nuxtjs.org（SPA 版本）
\n
2. https://hn.nuxtjs.org
\n

\n\n

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

\n\n

当我尝试将其保存到书签时，#1有一个图标（屏幕截图）。#2没有图标（截图）。我不明白为什么。

\n\n

我的问题：如何在书签中显示苹果触摸图标？

\n\n

---

\n\n

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

\n\n

nuxt.js 版本是 2.11.0。

\n\n

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

\n\n

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

\n\n

我也在使用@nuxtjs/pwa@3.0.0-0，但我禁用了 favicon 属性nuxt.config.js以使用自定义 favicons: pwa.meta.favicon: false。

\n

Answer 1

我是 Masumi。\n我刚刚修复了同样的错误，以便分享我的技巧！

\n

1. 将图标路径编辑为/static/apple-touch-icon.png.
\n(另外，我的文件的尺寸是512\xe2\x80\x8a\xc3\x97\xe2\x80\x8a512px)

\n

2. 编辑nuxt.config.js文件的头代码如下。

\n

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

\n

3.卸载@nuxtjs/pwa并删除相关代码。
\n如果仍然无法解决问题，可以通过卸载软件包（npm uninstall @nuxtjs/pwa）来解决。如果卸载PWA包，需要删除相关代码，例如modules.

\n

这个答案可能不适合您的解决方案，但如果它对您有帮助，我会很高兴:)

\n