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. Big Number HDU - 1212

    As we know, Big Number is always troublesome. But it's really important in our ACM. And today, your ...

  2. HTTP协议请求篇

    http协议的基本概念 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.是工作在tcp/ip协议基础上的,所有的WWW文件都必须 ...

  3. PHP面向对象魔术方法之__toString函数

    l 基本介绍: 当我们希望将一个对象当做字符串来输出时,就会触发__toString魔术方法. <?php header('content-type:text/html;charset=utf- ...

  4. 20.multi_case02

    # 多进程,使用Process对象 from multiprocessing import Process def f(name): print('hello', name) if __name__ ...

  5. Linux文本编辑命令

    sort 排序工具,比较排序(根据字典排序) -t 指定分隔符(默认是空格) -k 指定第几域排序(默认第一域) -n 以数字大小排序 -r 逆向排序 -v 去掉重复行 -o 输出到文件中 -c 测试 ...

  6. CSS三大特性之继承性

    1.并不是所有的属性都可以继承,只有以color/font/text/line开头的属性 才可以继承. 2.在CSS的继承中,不仅仅是儿子可以继承,只要是后代都可以继承. 3.继承中的特殊性 3.1  ...

  7. centos 7 开机优化shell

    vim  start_init.sh #!/bin/bash#####dns echo "nameserver 114.114.114.114" >/etc/resolv.c ...

  8. Python基础知识之3——运算符与表达式

    一.概念: 运算符:运算符用于执行程序代码运算,会针对一个以上操作数项目来进行运算.比如10+4=14,其中操作数是 10 和 4,运算符是“+” . Python 语言主要支持运算符类型有:算术运算 ...

  9. Linux下常用操作

    ************************ 镜像操作 ************************************* screen -s name 新建 screen -r name ...

  10. csp-s模拟64trade,sum,building题解

    题面:https://www.cnblogs.com/Juve/articles/11639755.html trade: 70分sbdp,然后一直想优化,dp还是很好写的 正解是反悔贪心 维护一个小 ...