【内推字节】欢迎简历chengxinsong@bytedance.com
vue项目--本地环境和线上环境的favicon设置
发布于 作者 saucxs 1404 次浏览 来自 分享

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


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



1、然后再index.html中添加:

 <link rel="icon" href="static/icon.jpg" type="image/x-icon" />
 <link rel="shortcut icon" href="static/icon.jpg" type="image/x-icon"  />


2、你的build文件夹下:build/webpack.dev.conf.js中,本地环境生效

增加  favicon:'static/icon.jpg'

 // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon:'static/icon.jpg'
    }),

启动一下npm run dev,这样本地的favicon生效了。


3、在build文件夹下,build/webpack.prod.conf.js中,线上部署环境生效



发布评论
微信群
saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!