在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. stand up meeting 1/14/2016

    part 组员                工作              工作耗时/h 明日计划 工作耗时/h    UI 冯晓云  主要对生词本卡片的整体设计做修改:协助主程序完成popup部分 ...

  2. Django文档阅读-Day1

    Django文档阅读-Day1 Django at a glance Design your model from djano.db import models #数据库操作API位置 class R ...

  3. 【python】显示图片 并随意缩放图片大小 图片归一化

    cv2.namedWindow("image_",0)  cv2.imshow("image_",image)就可以随意缩放显示图片的窗口大小啦. ------ ...

  4. EF多租户实例:演变为读写分离

    前言 我又来写关于多租户的内容了,这个系列真够漫长的. 如无意外这篇随笔是最后一篇了.内容是讲关于如何利用我们的多租户库简单实现读写分离. 分析 对于读写分离,其实有很多种实现方式,但是总体可以分以下 ...

  5. pytorch Dataset数据集和Dataloader迭代数据集

    import torch from torch.utils.data import Dataset,DataLoader class SmsDataset(Dataset): def __init__ ...

  6. Vue 3.0 Composition API - 中文翻译

    Composition API 发布转载请附原文链接 https://www.cnblogs.com/zgh-blog/articles/composition_api.html 这两天初步了解了下 ...

  7. synchronized 作为悲观锁,锁住了什么?

    继续来认识 synchronized,上篇文章加不加 synchronized 有什么区别?我们了解了 synchronized 是在多线程并发竞争同一资源的时候使用,这一篇我们来了解,synchro ...

  8. MySQL之视图、触发器、函数、存储过程、索引

    1.视图 把某个查询语句(临时表)设置别名,日后方便使用,视图是虚拟的(不要在数据库里使用视图) #创建: create view v1(视图名称) as SQL #修改: alter view v1 ...

  9. PHP中的数据库操作

    PDO project data object 连接到数据库 $db=new PDO("mysql:dbname=database;host=sever","userna ...

  10. Python 如何写 Ubuntu syslog

    address='/dev/log' 是关键 import logging from logging.handlers import SysLogHandler logger = logging.ge ...