vue项目修改浏览器图标以及标题-蒲公英云

vue项目修改浏览器图标以及标题

favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置，目前主要的浏览器都支持favicon.ico图标.

目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。

然后去index.html在head下添加：

<link rel="icon" href="static/img/logo/logo.jpg" type="logo/logo.jpg">
<link rel="shortcut icon" href="static/img/logo/logo.jpg" type="logo/logo.jpg">     <!-- 必须 -->

然后保存刷新浏览器，就会更新。（需重新运行项目npm run dev）

如果没有效果，则查看你的build文件夹下：build/webpack.dev.conf.js中。（到这个步骤之前我的是出现了，并且正常显示，如果不显示，则配置一下吧。）添加： favicon:’static/bitbug_favicon.ico’

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      // favicon图标(这里需要图标的路径与页面中的路径一样)
      // favicon: 'static/bitbug_favicon.ico' 
      // favicon: path.resolve('static/bitbug_favicon.ico')
      favicon:'static/bitbug_favicon.ico'
    }),