Vue. 之 替换 左上角 title标签处的图标

　　1、icon命名为favicon.ico放在项目的位置：src/assets/favicon.ico

　　2、在index.html中写入： <link rel="shortcut icon" type="image/x-icon" href="src/assets/favicon.ico" media="screen" >

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>文档资源后台管理 V1.0.0</title>

    <link rel="shortcut icon" type="image/x-icon" href="src/assets/favicon.ico" media="screen" >

  </head>

  <body>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

　　3、修改build下面webpack.prod.conf.js和webpack.dev.conf.js：

　　webpack.prod.conf.js：（   favicon: path.resolve('src/assets/favicon.ico'), // 引入图片地址  ）

    // generate dist index.html with correct asset hash for caching.

    // you can customize output by editing /index.html

    // see https://github.com/ampedandwired/html-webpack-plugin

    new HtmlWebpackPlugin({

      filename: config.build.index,

      template: 'index.html',

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

      inject: true,

      minify: {

        removeComments: true,

        collapseWhitespace: true,

        removeAttributeQuotes: true

        // more options:

        // https://github.com/kangax/html-minifier#options-quick-reference

      },

      // necessary to consistently work with multiple chunks via CommonsChunkPlugin

      chunksSortMode: 'dependency'

    }),

webpack.dev.conf.js：（   favicon: path.resolve('src/assets/favicon.ico'), // 引入图片地址  ）

   // https://github.com/ampedandwired/html-webpack-plugin

    new HtmlWebpackPlugin({

      filename: 'index.html',

      template: 'index.html',

      inject: true,

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

    }),

　　4、重新运行

Vue. 之 替换 左上角 title标签处的图标的更多相关文章

  1. php正则表达式提取img alt/title标签并替换

    有时我们需要对富文本编辑器中的img标签进行必要的处理以满足网站自身的需要,比如:根据站点关键词对页面内img的alt标签设定关键词,以下为提取并替换alt/title标签内容的正则: $title ...

  2. Vue设置页面的title

    原文地址:http://www.cnblogs.com/JimmyBright/p/7410771.html 前端框架如Vue.React等都是单页面的应用,也就是说整个web站点其实都是一个inde ...

  3. 使用正则表达式匹配HTML 下各种<title>标签

    http://www.oschina.net/question/195686_46313 <title>标题</title> <title>标题</title ...

  4. <meta> 标签 和<title> 标签

    <meta> 标签 主流浏览器都支持 <meta> 标签. 标签定义及使用说明 元数据(Metadata)是数据的数据信息. <meta> 标签提供了 HTML 文 ...

  5. Html Title 标签

    Html Title 标签 Title 是 HTML Head 内部标签 <html> <head> <!-- Title标签:HTML的标头标题 --> < ...

  6. 前端 HTML 常用标签 head标签相关内容 title标签 网页的标题信息

    title标签 <title>标签:在<title>和</title>标签之间的文字内容是网页的标题信息,它会显示在浏览器标签页的标题栏中. 可以把它看成是一个网页 ...

  7. vue之slot，组件标签嵌套

    vue之slot,组件标签嵌套 插槽(Slot),在各种vue的ui插件中,经常见到的多个组件标签相互嵌套(如下)就是以此为基础的. <el-col > <el-checkbox & ...

  8. title中添加小图标

    <title>标签中不能添加图片,但是可以添加小图标. 步骤: 1.做一个16 X 16像素的ico格式的图标.具体操作方法是,先在Photoshop中做一个透明背景的16 X 16像素P ...

  9. 雪碧图（background-position）、overflow、title中的小图标、光标、rgb 和opacity 与rgba

    一.background-position     雪碧图 我们的html和css中有三个属性可以向服务器发送请求:src   url    href 1.我们为什么使用雪碧图? 因为我们使用雪碧图之 ...

随机推荐

  1. winform的datagridview控件滚动更新数据

    范例源码下载地址:http://files.cnblogs.com/files/luoxiaozhao/PrintDemo.rar

  2. Windows下 vundle的安装和使用

    准备工作 1. 安装git 去官网下载,安装即可. 2. 添加git的环境变量 并将Git 的安装路径加入环境变量Path,如 D:\Program Files\Git\cmd 然后运行cmd,输入 ...

  3. selenium基础（参数化脚本）

    参数化脚本 什么是参数化 参数化就是用包含多组数据的参数列表,使之替换脚本中的响应常量值,这样,在脚本运行的时候,就会使用参数表中的数据来代替脚本中的常量值 由于参数表中包含了多组数据,所以执行用例时 ...

  4. Python全栈开发：css引入方式

    css的四种引入方式: 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p style="color: red;backgr ...

  5. CodeForces - 27E

    https://vjudge.net/problem/CodeForces-27E 求因子个数为n的最小的数dfs枚举质因子的幂 #include <iostream> #include ...

  6. 12_PCA之探究用户对物品类别的喜好细分降维

    案例: 探究:用户对物品类别的喜好细分降维. 背景:把用户分成几个类别,分类的依据是用户购买了哪些物品. 先看商品products.csv数据,有product_id,product_name,ais ...

  7. CSS奇数、偶数、指定数样式

    原文: https://blog.csdn.net/wangjia200913/article/details/49615325 语法    :nth-child(an+b) 第一种:简单数字序号写法 ...

  8. Apache ActiveMQ教程

    一.特性及优势 1.实现JMS1.1规范,支持J2EE1.4以上 2.可运行于任何jvm和大部分web容器(ActiveMQ works great in any JVM) 3.支持多种语言客户端(j ...

  9. Activiti数据库

    数据库 Activiti的后台是有数据库的支持,所有的表都以ACT_开头. 第二部分是表示表的用途的两个字母标识. 用途也和服务的API对应. 1)     ACT_RE_*: 'RE'表示repos ...

  10. Luogu P3209 [HNOI2010]平面图判定(2-SAT)

    P3209 [HNOI2010]平面图判定 题意 题目描述 若能将无向图\(G=(V,E)\)画在平面上使得任意两条无重合顶点的边不相交,则称\(G\)是平面图.判定一个图是否为平面图的问题是图论中的 ...