在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. L25词嵌入进阶GloVe模型

    词嵌入进阶 在"Word2Vec的实现"一节中,我们在小规模数据集上训练了一个 Word2Vec 词嵌入模型,并通过词向量的余弦相似度搜索近义词.虽然 Word2Vec 已经能够成 ...

  2. E - Dividing Chocolate ATcoder

    题目大意:切割图形,给你一个非0即1的矩阵,将它切割成多个长方形,使每个小长方形中1的个数不得多于k个,切割的规则,要么切一整行,要么是一整列. 题解: 二进制枚举. 注意行数最大才是10.用二进制枚 ...

  3. 【论文研读】强化学习入门之DQN

    最近在学习斯坦福2017年秋季学期的<强化学习>课程,感兴趣的同学可以follow一下,Sergey大神的,有英文字幕,语速有点快,适合有一些基础的入门生. 今天主要总结上午看的有关DQN ...

  4. jmeter引入外部jar包的方法

    jmeter最完美的jar包引入 第一步:需要新建一个文件夹用来存放需要引用的外部jar包,例如:建一个dependencies 文件夹 第二步:jmeter 的配置文件 jmeter.propert ...

  5. golang实现并发爬虫一(单任务版本爬虫功能)

    目的是写一个golang并发爬虫版本的演化过程. 那么在演化之前,当然是先跑通一下单任务版本的架构. 正如人走路之前是一定要学会爬走一般. 首先看一下单任务版本的爬虫架构,如下: 这是单任务版本爬虫的 ...

  6. 最通俗易懂的Redis发布订阅及代码实战

    发布订阅简介 除了使用List实现简单的消息队列功能以外,Redis还提供了发布订阅的消息机制.在这种机制下,消息发布者向指定频道(channel)发布消息,消息订阅者可以收到指定频道的消息,同一个频 ...

  7. socket小计

    socket,是一个实现了双向通信的链接. 将http比喻为轿车,承载数据.传递数据,那么socket,就是轿车的发动机,它轿车动起来.

  8. Caused by: java.lang.NumberFormatException: For input string: " 60"

    原因 原原因:string转int 格式出错 解决:我的输入文件格式在根据“,”分割完之后多出了一个空格,我想要的是“60” 但是分割完之后是“ 60”所以导致格式转换不匹配.

  9. 在Windows中使用VirtualBox安装Ubuntu

    VeitualBox官网下载:https://www.virtualbox.org/wiki/Downloads 安装教程:http://dblab.xmu.edu.cn/blog/337-2/ 安装 ...

  10. Python selenium Chrome正在受到自动软件的控制 disable-infobars无效 的解决方法

    问题解决 前两天更新了google浏览器版本,今天运行以前的脚本,发现options一个参数的配置不生效了. 运行了几次都发现该参数没有生效,也检查了自己的代码参数,没有写错,于是就有了这一波“网中寻 ...