vue.js 无法更改默认nuxt图标

ha5z0ras 于 2023-02-13 发布在 Vue.js

关注(0)|答案(7)|浏览(225)

我是新的nuxt和尝试改变默认图标在我的项目。
我更改了static文件夹中的favicon.png和favicon.ico。=〉不起作用。
更改了我的dist文件夹中的favicon.png和favicon.ico. =〉不起作用.
替换由favicon生成器网站在我的dist/_nuxt/icons文件夹中生成的正确文件. =〉不工作.
这是我的nuxt.config.js

head: {
    title: "my first nuxt proj - main page",
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }],
  },

我错过什么了吗？

vue.js

来源：https://stackoverflow.com/questions/61318494/cant-change-default-nuxt-favicon

7条答案

按热度按时间

8ftvxx2r1#

我找到了解决办法，但有点棘手，而且有点不合逻辑。
这大小的favicon应该是32*32像素或nuxt将载入这默认favicon本身.
关于我的尝试，在static文件夹中有一个文件并给予nuxt.config.js的路径就足够了。
但我还是不知道该怎么解决。

赞(0）回复(0）举报 2023-02-13

2exbekwf2#

您是否尝试过将type: 'image/x-icon'替换为type: 'image/png'？
有关此属性和标记的信息通常可以通过here读取
nuxt会将{ head: { link: [{ rel: 'icon', type: 'image/png', href: '/favicon.png' }] }}这样的对象转换为

<head>
  <link rel='icon' type='image/png' href='/favicon.png'>
</head>

因此您可以使用上面文章中列出的任何属性。

赞(0）回复(0）举报 2023-02-13

ojsjcaue3#

我在运行SSR nuxt应用程序时也遇到了同样的问题。有几件事需要记住：
1.您需要使用favicon.png解决此问题（如@Hossein所述，为16 x16像素或32 x32像素）和静态目录中的icon.png文件。nuxt似乎基于/static/icon.png中的icon.png生成图标（ref）。该文件至少应为512 x512（ref）.从我的测试来看，如果它太小，它在生成更大的图标时遇到了问题，这些图标最终出现在注解中@tgf所指出的node_modules/.cache/pwa/icon位置。在运行npm run dev之后，您应该看到一个更新的图标，并且在运行npm run build之后看到相同的内容。
1.我使用匹配的标记...即favicon.png使用rel: 'icon', type: 'image/png', href: '/favicon.png'，如果ico使用rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'。有点旧，但WC3 has example and docs的png。

赞(0）回复(0）举报 2023-02-13

ljsrvy3e4#

当pwa图标卡在缓存中时，有时会发生这种情况。您只需要在nuxt.config.js中重命名pwa图标，如下所示：

并且可能在那之后它将需要重建项目。

赞(0）回复(0）举报 2023-02-13

ygya80vv5#

我也有同样的问题，我是这样解决的：

{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }

请将“/favicon.ico”替换为您的图标URL。注意将href保留为type，然后在终端中运行npm run build。然后您可以再次运行您的产品。

赞(0）回复(0）举报 2023-02-13

5lwkijsr6#

有时，问题是***缓存***
如果您删除以下目录中的所有文件，然后重新构建，您替换的图标将正常工作！

{rootDir}/node_modules/.cache/pwa/icon

或

{rootDir}/node_modules/.cache/nuxt/dist/client/icons

现在，使用以下命令：

npm run build

npm run generate

我正在阅读 * Nuxt PWA * 和 * Icon Module Section * 的文档，突然想到了这个想法！

赞(0）回复(0）举报 2023-02-13

iezvtpos7#

我有同样的问题，我用这个在我的头标题。公司标志的价值是url png，但仍然显示nuxt图标

{ rel: 'icon', href: `${storedata.company_logo}?v1` }

如果我看到html，这url是生成的

赞(0）回复(0）举报 2023-02-13

我来回答

vue.js 无法更改默认nuxt图标

7条答案

相关问题

热门标签

最新问答