vue 2.0项目 favicon.ico不显示 解决方案

本文详细介绍了如何在项目中正确配置favicon.ico图标,包括将其放置于正确目录、在webpack配置文件中添加必要插件设置、在index.html中引入代码以及清除缓存的方法,确保浏览器能正确显示网站图标。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、最好把favicon.ico放到 index.html放到同一目录

2、在webpack 配置文件里面配置

// 在webpack.dev.conf.js 里面的 plugins配置
new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    favicon: './favicon.ico'      //增加这条
}),
//和
//在 webpack.prod.conf.js 里面 plugins 配置   ,不然build的时候也找不到favicon.ico
new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  favicon: './favicon.ico',         //增加这条
  minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
  },
  chunksSortMode: 'dependency'
}),

3、在index.html 中引入代码

<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" /> 

4、修改完配置文件最好 npm run dev 一下

如果这样小图标还是没有显示,最好 清空一些缓存



作者:xilong
链接:https://www.jianshu.com/p/1f7a096b61c2
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

### 更改 Vue.js 项目中的 Favicon.ico 图标 #### 使用配置文件统一管理 Favicon 路径 为了简化项目Favicon管理,可以在配置文件中设置Favicon路径。通过这种方式,在多个地方使用的HTML模板可以引用同一个配置项,从而减少重复劳动和错误发生的可能性。 对于Vue CLI创建的应用程序来说,可以通过`vue.config.js`来进行全局性的配置调整[^1]: ```javascript // vue.config.js module.exports = { chainWebpack: config => { config.plugin('html').tap(args => { args[0].favicon = './src/assets/favicon.ico'; return args; }); } } ``` 此段代码会告诉HtmlWebpackPlugin使用指定位置的图片作为网页标签页的小图标。 #### 利用 JavaScript 动态加载 Favicon 另一种方式是在应用初始化阶段利用JavaScript动态改变文档头部链接元素指向的新图标资源地址[^2]: ```javascript function changeFavIcon(url){ let link = document.querySelector("link[rel*='icon']") || document.createElement('link'); link.type = 'image/x-icon'; link.rel = 'shortcut icon'; link.href = url; document.getElementsByTagName('head')[0].appendChild(link); } changeFavIcon('/path/to/new-favicon.ico'); // 替换成实际图标URL ``` 这种方法的好处在于需要重新编译整个应用程序就可以即时更新浏览器Tab上的显示图像。 #### 修改 Webpack 配置以支持静态资源处理 如果上述两种方法未能达到预期效果,则可能是因为构建工具链对静态资产的支持够完善所致。此时应该检查并适当修改WebPack的相关配置选项,比如在`build/webpack.dev.conf.js`里面加入如下所示的一行配置[^3]: ```javascript new HtmlWebpackPlugin({ ... favicon: path.resolve(__dirname, '../static/bitbug_favicon.ico'), }) ``` 这一步骤确保打包过程中能够正确识别并引入所需的Favicon文件。 #### 手动编辑 HTML 文件指明新图标路径 最直接的办法就是直接操作位于`public/index.html`内的<link>标记,把其`href`属性更改为所要替换的那个`.ico`文件的位置[^4]: ```html <!-- public/index.html --> <!DOCTYPE html> <html lang="en"> <head> <!-- Other meta tags and links... --> <link rel="icon" href="%PUBLIC_URL%/new-favicon.ico"> </head> <body> ... </body> </html> ``` 完成以上任一或组合措施之后,请记得重启开发服务器以便使改动生效,并确认新的Favicon已经成功应用于页面之上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值