在vue项目中使用favicon.ico

一般项目使用favicon.ico都是在index.html头部head中加入代码

vue项目中使用和上面的方法不同，需要配置webpack才能使avicon.ico生效，记录一下，以备后用。

webpack.dev.conf.js文件中修改

    let path = require('path') // 增加new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true,favicon: path.resolve('favicon.ico') // 增加})

webpack.prod.conf.js文件中修改

   new HtmlWebpackPlugin({filename: config.build.index,template: 'index.html',inject: true,favicon: path.resolve('favicon.ico'), //新增minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true...})

修改以后需要重新启动项目npm run dev

在vue项目中使用favicon.ico相关推荐

VUE更换项目中的favicon.ico图标
VUE2中更换项目中的favicon.ico图标步骤: 方法一: 1.使用比特虫免费在线制作ico图标(网站地址:https://www.bitbug.net/): 2.将新的图标命名为new-fav ...
SpringBoot项目中增加favicon.ico图标
项目中增加favicon.ico图标前情摘要:用了两年的项目,ico一直用的是默认的图标,最近领导要求换个带有公司logo的ico,项目中正式用的是设计小姐姐发给我的,以下文章中使用的是我自己下载的 ...
vue项目中如何设置ico图标
在vue项目开发中往往会设计到浏览器头部图标的设置,这里分享一下自己在项目中的使用的方法,如有不足的地方还望指正,直奔主题: 1.首先如何制作ico图标,本人使用的是比特虫在线制作ico图标,使用方法 ...
vue-cli3 vue项目动态修改favicon.ico(浏览器顶部小图标)
1.需求最近产品提了一个需求--一个项目适配于不同公司(即只需要更换logo和基础文案即可)故需要动态切换favicon.ico展示(即浏览器顶部小图标) 2.最终实现效果如下图 3.两种解决办法 ...
Vue脚手架中添加favicon.ico图标失效问题
最近项目中根目录添加favicon.ico,直接在index.html中加入 <link rel="shortcut icon" type="image/x-ico ...
[vue] 在vue项目中如何配置favicon？
[vue] 在vue项目中如何配置favicon? 也可以在当前项目部署的端口主目录下存放favicon.ico文件,默认就会显示该图标个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
vue项目中配置标题栏title的图标和文字
一.普通 HTML 页面,配置图标和文字 <head><title>标题栏文字</title><link rel="icon" href= ...
在vue项目中设置网站图标
怎么在我们的Vue项目中设置自定义的网站图标: 首先我们需要先制作个ico图标,大小为32*32的,放到static文件夹下,附制作网站,我们把制作好的ico图片改名为:favicon.ico(注:必 ...
vue项目中浏览器图标的设置
在vue项目中,我们怎样设置浏览器图标? 我们来看vue项目的目录结构,根目录下有一个index.html,这个就相当于我们普通项目中的各个html页面文件,所以设置方法就是在index.html的h ...

在vue项目中使用favicon.ico

在vue项目中使用favicon.ico相关推荐

最新文章

热门文章