在VUE全家桶项目里面，这里给大家提供了2种方案，进行浏览器图标的配置。

a)：先把图片准备好，放在static文件夹下，再找到根目录下的index.html文件，并打开，在HTML文档的<head>标签加入下面代码即可。

<link rel="shortcut icon" href="./static/images/favicon.ico"/>
    <link rel="apple-touch-icon" href="./static/images/favicon.ico"/>　　/*为适应苹果系统配置*/

b)：把准备好的图片文件(.ico)放到根目录，修改 build 文件夹下 webpack.prod.conf.js （生产环境）和 webpack.dev.conf.js（开发环境） 文件：

var path = require('path') // 一般vue-cli会自带，当然了，没有的话，再手动引入

// HtmlWebpackPlugin 中添加 favicon

new HtmlWebpackPlugin({

  filename: 'index.html',

  template: 'index.html',

  favicon: path.resolve('favicon.ico'), // 引入图片地址

  inject: true

})

最后重新执行npm run dev即可。

****************************************   END   ****************************************

vue-cli中浏览器图标的配置的更多相关文章

  1. 使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息（包括：development、production）

    使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development.production) --mode 指定环境模式 ...

  2. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  3. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  4. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  5. 在vue项目中的axios使用配置记录

    默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...

  6. vue.cli 中使用 less 来写css样式

    vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader ...

  7. @vue/cli 构建得项目eslint配置

    如下:package.json // package.json { "name": "ecommerce-mall-front", "version& ...

  8. ubuntu中桌面图标的配置

    在网上随处可以找到怎么样把应用程序的图标放到桌面上,我刚用ubuntu时也是按照网上的做法,一步一步的做的,现将网上的做法复制下来: 桌面配置文件简述\label{sec:desktop file} ...

  9. vue项目中icon图标的完美引入

    第一步: 进入阿里矢量图标库并登录 地址:https://www.iconfont.cn 第二步: 选择项目需要的图标添加到库 第三步: 选完之后点击右上角的购物车,打开后点击添加到项目,没有就自己建 ...

随机推荐

  1. 在学习java之余，js的使用精髓-闭包和原型链

    这里分享下廖雪峰官网写的js教程,内容写的比较实用,易懂,其中简介的原型链和闭包的知识,小伙伴们一起上呀,畅游在知识的海洋中: 地址:https://www.liaoxuefeng.com/wiki/ ...

  2. 从联想昭阳到MacBook Pro，致我的那些败家玩意——电脑

    对于程序员来说,你懂的,电脑就是我们的女朋友,在很多层面上,它都是,打游戏.敲代码,以及看影片. 我第一台电脑是联想的笔记本(昭阳系列),花了 4000 多块买的. 那时候,家里很是缺钱,4000 多 ...

  3. google无法播放mp4 chrome无法播放h264

    写在前面 我在chrome上无法播放h264+Acc的mp4,在firefox.ie都可以播放,而且此mp4在vlc终可以正常播放. 视频链接:http://106.14.221.185:7001/p ...

  4. 【启蒙】C笔记之初学阶段（下篇）

    下篇继续点赞,谢谢老铁,不存在下次一定的哈! c语言简单判断质数的方法 int isprime(int a){ ) ; ==||a==||a==) ; else { ;i<=sqrt(a);i+ ...

  5. java 方法的重载、重写与重构

    首先我们要知道重载.重写.重构的区别 重载:指的是在同一个类中,方法名相同,但是参数数量.参数类型或者返回类型不同的方法就叫做重载. 重写: 重写分两种.第一种的是在子类继承父类的情况下,通过@Ove ...

  6. LABEL和UUID

    基本用法 blkid 查看LABEL # blkid -s LABEL /dev/hda3: LABEL="/" /dev/hda1: LABEL="/boot1&quo ...

  7. BI报表分析和数据可视化，推荐这三个开源工具！

    开源篇 一.Superset 1.技术架构:Python + Flask + React + Redux + SQLAlchemy 2.使用人群: (1)开发/分析人员做好看板,业务人员浏览看板数据 ...

  8. MAC地址欺骗（原理及实验）

    MAC地址欺骗 MAC地址欺骗(或MAC地址盗用)通常用于突破基于MAC地址的局域网访问控制,例如在交换机上限定只转发源MAC地址修改为某个存在于访问列表中的MAC地址即可突破该访问限制,而且这种修改 ...

  9. 1309：【例1.6】回文数(Noip1999)

    传送门:http://ybt.ssoier.cn:8088/problem_show.php?pid=1309 [题目描述] 若一个数(首位不为零)从左向右读与从右向左读都是一样,我们就将其称之为回文 ...

  10. 学会HTML就可以找工作了

    对编程小白来讲,想要学习门槛低,学习周期短,难度指数可忽略.短时间内可能找一份薪资不错编程相关工作,那就把HTML作为入门级语言吧. 网页设计师 (//upload-images.jianshu.io ...