为VUE-CLi2项目自定义title标签页小图标

最新推荐文章于 2023-08-15 09:17:44 发布
最新推荐文章于 2023-08-15 09:17:44 发布
阅读量1.5k 收藏 4
点赞数 2
分类专栏： Vue 文章标签： vue 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42304808/article/details/106210289
版权
本文介绍了如何在Vue CLI2项目中自定义title标签页小图标，包括在项目根目录添加favicon.ico文件，修改index.html引入图标，以及配置webpack的dev和prod配置文件来实现图标生效。
摘要由CSDN通过智能技术生成

初始图标如图
在这里插入图片描述

1. 在项目根目录（index.html同级目录）下添加favicon.ico文件

在这里插入图片描述

2. 在项目index.html中引入图标

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

3. 配置webpack配置文件(build文件夹下面)

在 webpack.dev.conf.js 和 webpack.prod.config.js 中添加如下代码

favicon: path.
最低0.47元/天 解锁文章
whylost迷心
关注
专栏目录
vue-cli3+技术栈实战完整笔记（一）
斗师——Ace
10-06 3623
添加小程序，兑换各种视频教程/数据资源。 0. 基于vue ui创建vue cli3.0项目：参考：https://blog.csdn.net/qq_42231156/article/details/82343793。 1.项目文件vueCli3.0下： pulic文件下：favicon.ico是网址上方标题的的小图标。 index.html：是入口文件。 s...
vue-cli实现《去哪儿旅行》App笔记（一）首页
weixin_33138889的博客
09-14 4470
正在慕课网学习Vue开发去哪儿网App，技术栈有vue-cli、webpack和github等等。因为此前没有vue开发的经验的小白，在此记录下课余自己再实现一遍时遇到的问题，希望能和其它正在一起努力的同学们分享经验，也希望能得到前辈们的指点。 创建git项目 1. 添加公钥 查看git的用户名和邮箱 git config user.name git ...
vue cli2.0单页面title修改方法
01-21
一、npm install vue-wechat-title --save  执行命令 二、在main.js中添加    Vue.use(VueWechatTitle); Vue.config.productionTip= false 三、在router/index.js文件中添加   routes: [{ path: '/',redirect: 'Home' },{ path: '/Home',name: 'Home',component: Home, meta:{ title:'银行开户' }},], 四、在app.vue 中修改 router-view  修改
vue项目设置浏览器标题title及图标
热门推荐
Aaron_杀死庸碌的博客
07-14 1万+
方法一：在vue.config.js文件，添加如下代码： 方法二：直接在public/index.html中修改title即可，如下： 二、动态设置标题方案 方法一：通过路由导航守卫设置，使用Vue-Router的beforeEach拦截 方法二：使用插件vue-wechat-title来设置浏览器动态标题 三、图标修改 1、首先做一个ico的小图标，命名为 favicon.ico 放在 /public/下面，替换原有的 favicon.ico，需要可以备份原有的 favicon.ico。 2、在 /pub
vue中网页标签处title和小图标设置方法
seeeeeeeeeee的博客
06-25 822
图标 <link rel="icon" type="image/x-icon" href="./favicon.ico" /> 直接引入放在index.html内就行，herf 改成图标的地址，图标放在同一个文件夹内 title 再路由内设置title { //首页详情 path:"/index", name:"index", meta:{ title:"我的网页" }, com
Vue进阶（六十九）：vue设置title图标
IT全栈 华强工作室
09-06 2161
在项目index.html头部引入这句话： <link rel="icon" href="favicon.ico" type="image/x-icon"> 把favicon.ico文件放到项目根目录，和index.html同级。 项目build文件夹里找到webpack.dev.conf.js和webpack.prod.conf.js这两个文件。在相应地方添加下图红框中的语句。 ...
vue中遇到的一些小问题之二——添加title中的小图标
热心市民小胖纸的博客
07-09 3235
需要解决的问题：采用的vue-cli框架，新人半路接到项目，原先title的图标已经删掉，需要重新添加一个title图标 网上的例子都是一些官方的什么替换啊，配置总之是对的，但是不是很全面。 解决方案 首先两个配置文件; webpack.prod.conf.js 这个文件中：引入代码const path = require('path') ；下面是进行配置： new HtmlWeb...
两小时从零学会vue-admin-template框架
drhrht的博客
03-06 6802
一、vue-admin-template 1.项目简介 官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi
VueCli PWA + Vuetify 项目创建指南
PHANTOM
05-28 624
随着Vuejs的快速发展和Vuejs相关生态系统的完善，构建一个VueCli工程应用已经相对容易。本文主要介绍了使用VueCli脚手架，结合vuetify UI框架创建和配置一个完整的PWA应用。
vue中添加标签页title前面小图标
太阳晒屁股了的博客
09-12 2521
一，将favicon.ico图标放到static目录下 二，在index.html中引入favicon.ico <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="shortcut icon" type="image/x-icon" href="static/fav...
vue-cli 网站ico
weixin_39520640的博客
09-18 182
1、生成ico图标 http://www.faviconico.org/favicon 2、直接命名为favicon.ico，存放在static目录 3、在主文件index.html内中直接引入图标文件 <link href="./static/favicon.ico" rel="shortcut icon" type="image/x-icon"> 4、重新运行项目 npm run...
vue 下配置标题栏 title 图标及文字的具体步骤
web前端学习总结
04-18 7058
1 . 将图片.ico 文件放在项目根目录下 2 . 在 index.html 页面上配置图标及文字 在项目的index.html 中： &lt;head&gt; &lt;title&gt;标题栏文字&lt;/title&gt; &lt;link rel="icon" href="./favicon.ico" type="image/x-icon"&gt; &
怎么在vue项目中的浏览器网页标题添加小图标
StephenO_o的博客
11-14 7962
1.项目需求：在网页标题处添加小图标 如下所示   2.在Vue项目文件夹目录中找到index.html 如下所示 3.将所需图标放在static目录下 如下所示 为什么放在static目录下，而不是放在src目录下呢？ 因为放在src下浏览器会找不到的，网页把根域名作为相对文件的根目录了，但是我们的文件的路径是相对于我们的项目文件的根目录的，因此找不到了。 反正不用...
vue-cli2 favicon配置
oihezz的博客
11-10 482
vue-cli2 favicon配置 将favicon.ico放在根目录下； build目录下 // 在webpack.dev.conf增加 new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true, favicon: path.resolve('favicon.ico') // 增加这行 }), // 在webpack.prod.conf增加 new HtmlWebpack
【网站搭建】完整部署django+uwsgi+nginx
qq_45780842的博客
04-08 640
云服务器上部署django + nginx + uwsgi，配置实例详细过程以及加载静态文件的方式。
vue-cli 2.x 配置多页面
邱先生的博客
08-07 2910
1.适用于Vue-cli 2.x 适用于Vue-cli 2.x 创建相应的html静态文件。 创建匹配html的.vue文件和对应的.js文件 修改config/index.js 修改build/webpack.base.conf.js 修改build/webpack.dev.conf.js 修改build/webpack.prod.conf.js 下面以创建login.html为所需要...
手把手教你更改Vue项目图标
最新发布
不愧是暮言的博客
08-15 6347
除了使用第三方图标库外，你还可以自定义样式，使用项目中的自定义图标。这需要你自己设计和绘制图标，并将其转化为字体文件（通常使用SVG格式）
vue2.x 如何更换网页logo
qq_41948178的博客
06-10 867
vue2.x更换网页logo
Vue项目修改页面标签
阿水的博客
05-11 3535
Vue项目修改网页标签、Vue项目修改页面标签
vue-cli4.0快速搭建项目教程
"使用vue-cli4.0快速搭建一个项目的方法步骤" 本文主要介绍了如何使用vue-cli4.0来快速搭建一个Vue.js项目，包括升级本地环境和创建新项目的步骤。作者首先提到了由于公司项目早期采用的是vue-cli2.0，随着版本更新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值