在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. Linux编辑利器-Vim

    在大学时代,Vim 的大名就已如雷贯耳,但由于它陡峭的学习曲线,一直望而却步.等真正开始学习之后,发现并没有想象中的复杂,也没有所谓的瓶颈,只要在实际写代码中强迫自己使用就可以了,无形中就会形成习惯. ...

  2. 本地同时使用多个git账号

    config文件说明 Git Document指示在首次安装git的时候需要配置Config的相关内容信息,有三个地方存储了config文件,决定了读取的场景不同. 1 /etc/gitconfig: ...

  3. 人体和电脑的关系——鸟哥的LINUX私房菜基础学习篇读书笔记

    CUP=脑袋: 每个人会做的事情都不一样(指令集的差异),但主要都是通过脑袋来判断与控制身体各部分的行动 内存=脑袋中存放正在思考的数据区块: 在实际活动过程中,我们的脑袋需要有外界刺激的数据(例如光 ...

  4. shiro：加密及密码比对器（三）

    基于[自定义remle(二)]项目增加加密功能 1:数据库t_user表增加一列(盐) 增加字段:salt CREATE TABLE `t_user` ( `id` int(11) NOT NULL ...

  5. 从零开始学习docker之docker的安装

    一.Docker 使用 Google 公司推出的 Go 语言 进行开发实现,基于 Linux 内核的 cgroup,namespace,以及 OverlayFS 类的 Union FS 等技术,对进程 ...

  6. tensorflow1.0 构建神经网络做图片分类

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data mnist = input_dat ...

  7. Zookeepe的安装和集群的配置

    Zookeepe的安装和集群的配置 一.Zookeeper的简介 Zookeeper是个框架 二.Zookeeper在Linux上安装 官方提供的下载服务器 地址1:http://mirror.bit ...

  8. 解决Lost connection to MySQL server during query错误方法/Mysql关闭严格模式

    使用Navicat 导入MySQL数据库的时候,出现了一个严重的错误,Lost connection to MySQL server during query,字面意思就是在查询过程中丢失连接到MyS ...

  9. Python（10）

    如果 a+b+c=1000,且 a^2+b^2=c^2(a,b,c 为自然数),如何求出所有a.b.c可能的组合? # 注意是三重循环 for a in range(0, 1001): for b i ...

  10. Configure Visual Studio with UNIX end of lines

    As OP states "File > Advanced Save Options", select Unix Line Endings. https://stackove ...