在使用vue脚手架时为什么不能加载favicon.ico图标

Question

我在使用vue脚手架的时候不能加载favicon.ico这个图标

我也在index.html中写了这句话：<link href="./favicon.ico" rel="icon" type="image/x-icon" />

Answer 1

// build/webpack.dev.conf.js

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    favicon: path.resolve('favicon.ico')   // 加上这个
})

Answer 2

把.ico放到static目录下

<link rel="shortcut icon" sizes="48x48" href="/static/favicon.ico">

Answer 3

拿走不谢……

Answer 4

楼主是怎么解决的我现在也碰到了！！

Answer 5

这个还需要配置到脚手架里面么？我以为直接丢到根目录就可以了呢！

Answer 6

将favicon.ico放到static文件夹下，在index.html中加入
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
不论是测试还是生产环境都没问题的呀

Answer 7

上面被采纳的解答亲测有效
index.html 中不需要引入，只要webpack配置就好
如果重启看不到效果，建议换个浏览器试一下，我被chrome坑的很惨，一直缓存，连无痕模式也无法拯救

Answer 8

亲身测试 不用在配置, 直接将ico文件放在static中在index.html引入就可以了 因为我的配置完会报错

Answer 9

我也遇到了相同的问题 试了很多方法 解决不了

我的index.html在public文件夹下
static 跟 public同级

试了各种方法 在生产环境上都不显示 求教

vuecli 3.0

Answer 10

楼主问题解决了嘛 我是测试环境有图片 生产环境加载不出图片 访问图片路径又到登录页面了