nuxt项目 favicon.ico不显示

Question

问题描述

如下设置，但是在浏览器地址栏不显示图标
如何设置才能显示出来

问题出现的环境背景及自己尝试过哪些方法

相关代码

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

Answer 1

1.首先在nuxt.config.js中配置:

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

2.你的favicon.ico图标文件需要放到static目录下,结构如下图：

因此你可以检查一下你文件放的目录是否正确。

Answer 2

我手动把 favicon放在了项目根目录后，解决了我的问题，在nuxt项目的 server/index.js 文件里添加下面的代码，sent方法用了koa-send库;

app.use(async (ctx, next) => {
    let pattern = /\.[\d\w]+$/;
    let fileName = pattern.test(ctx.path) 
    ? ctx.path 
    : ctx.path+'index.html';
    
    if(ctx.url.indexOf('/dist/') > -1){
        await send(
            ctx, 
            fileName, 
            {root: path.join(__dirname, '../')}
        )
    } else if(ctx.url.indexOf("favicon.ico") > -1) {
        await send(ctx, fileName, {root: path.join(__dirname, '../')})
    } else {
        next();
    }
  })

Answer 3

我信你个鬼
nuxt我下载后更笨没动nuxt自己都配置好了但是就是出不来

Answer 4

我也遇到了，其实 这个配置没问题，但我的生成的文件并不是放在根目录 而是在项目名目录下所以icon的配置需要改成：{ rel: 'icon', type: 'image/x-icon', href: '/项目名/favicon.ico' }

Answer 5

关于解决nuxt3项目无法显示favicon.ico图标问题

由于该项目修改了入口文件位置

nuxt.config.ts

故需要将原有的public文件移入src文件中

解决