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. JS 二维数组

    给一个数组元素,赋一个数组的值,那么,这个数组就是“二维数组”. 二维数组,就得用两层循环来实现.也就是说循环套循环. 二维数组的循环,与二维表格的循环一模一样. 二维数组的访问:数组名后跟多个连续的 ...

  2. 第二十二篇：Spring简单定时任务

    背景:有些操作,不适合放在页面上让用户手动触发去执行,比如一些需要不断更新的数据(如统计数据)有些需要同步的数据,不需要非常实时,可以在固定的时间或者固定的频率执行同步 第一步:配置xml第二步:编写 ...

  3. USACO 2013 January Silver Painting the Fence /// oj23695

    题目大意: 输入n,k :n次操作 找到覆盖次数在k及以上的段的总长 一开始位置在0 左右活动范围为1-1000000000 接下来n行描述每次操作的步数和方向 Sample Input 6 22 R ...

  4. [WPF自定义控件库]使用WindowChrome自定义RibbonWindow

    原文:[WPF自定义控件库]使用WindowChrome自定义RibbonWindow 1. 为什么要自定义RibbonWindow 自定义Window有可能是设计或功能上的要求,可以是非必要的,而自 ...

  5. C++自己用模板减少工作量

    今天写代码,遇到这样一个类似如下的需求: auto componentClassSavedByPLC = std::make_shared<ComponentClassSavedByPLC> ...

  6. ps photoshop

    PS-前端切图教程(切jpg图和切png图) 参考线显示和隐藏:ctrol+h alt+v+e或者打开标尺然后从点击标尺就能拖拽出来,删除也是拖到标尺附近就删除 显示.隐藏标尺:ctrol+R 显示网 ...

  7. Widget Factory

    Widget Factory 有N种零件,生产所需天数都为3~9天,有M条记录,记录开工星期几,和停工星期几,并告诉你这条记录所加工的零件,求每种零件的生产时间,\(1≤N,M≤300\). 解 显然 ...

  8. openssl操作公私钥和加解密的一些常用命令

    生成公私钥实践: 生成私钥,这里以椭圆曲线secp256k1为例: openssl ecparam -name secp256k1 -genkey -out secp256k1-priv.pem #带 ...

  9. centos6 nginx 配置本地https访问

    安装准备 yum install openssl openssl-devel 生成文件 cd /usr/local/nginx/conf # 生成密钥privkey.pem: openssl genr ...

  10. webpack新手名词解释……妈妈再也不担心我看不懂webpack官方文档了

    __dirname : 在任何模块文件内部,可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径. path.resolve(): 方法将一系列路径或路径段解析为绝对路径. 语法: p ...