从资产加载图标在 nuxt3 中不起作用

Question

我正在尝试从 nuxt 3 中的资源加载 favicon，但它不起作用，除非我在它前面硬编码 _nuxt。我的配置看起来像这样并且有效：

    export default defineNuxtConfig({
        app: {
            head: {
                link: [{ rel: 'icon', type: 'image/png', href: '_nuxt/assets/favicon.png' }]
            }
        },

但根据文档，它应该是这样的：

    ~assets/favicon.png

或者

    ~/assets/favicon.png

但两者都不起作用。
有什么方法可以按照记录执行此操作还是这是一个错误？

附加信息：如果使用 vue 组件中的链接，它可以工作，并且如果我将其显示在页面上，则 favicon 会正确加载。

Answer 1

你不能这样做，因为 nuxt 不会转换头对象中的路径，并在头中准确设置你的路径，并且在构建之后，没有资产文件。

\n

你可以使用_nuxt或者这个：

\n

export default defineNuxtConfig({\n    app: {\n        buildAssetsDir: \'/something/\',\n        head: {\n            htmlAttrs: { dir: \'rtl\', lang: \'fa\' },\n            link: [{ rel: \'icon\', type: \'image/png\', href: "/something/assets/images/logo.png" }]\n        },\n    },\n})\n

\n

默认情况下，buildAssetsDir\ 的值为，_nuxt但您可以更改它。

\n

阅读更多：https ://nuxt.com/docs/api/configuration/nuxt-config#buildassetsdir

\n

另一种解决方案

\n

为什么你不使用 public/ 目录，因为：

\n

\n

\xc2\xa0public/\xc2\xa0目录直接位于服务器的根目录

\n

\n

为什么需要模块捆绑器来处理您的网站图标？所以你可以使用这个：

\n

export default defineNuxtConfig({\n    app: {\n        head: {\n            link: [{ rel: \'icon\', type: \'image/png\', href: \'/favicon.png\' }]\n        }\n    },\n

\n

了解更多： https: //nuxt.com/docs/guide/directory-struct/public

\n