vue 浏览器 图标 icon 标题 title 区分环境

最新推荐文章于 2024-04-06 20:10:36 发布
最新推荐文章于 2024-04-06 20:10:36 发布
阅读量647 收藏
点赞数 3
分类专栏： favicon vue 前端适配 文章标签： vue.js 前端 icons
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42241340/article/details/121242843
版权
vue 同时被 3 个专栏收录
5 篇文章 0 订阅
订阅专栏
前端适配
2 篇文章 0 订阅
订阅专栏
favicon
1 篇文章 0 订阅
订阅专栏

vue设置浏览器标题图标方法其实很简单，就一行代码就ok
首先它是分环境的，不同环境也可以设置不同的图标
首先你得有一个ico格式的图标,没有的可以在线制作跳转在线制作工具可以设置大小在这里插入图片描述
然后就是放到你的项目里边。

开始设置
谁知测试环境的图标，就找到build文件夹下边的webpack.dev.conf.js然后在HtmlWebpackPlugin下添加一个属性，favicon，后边跟的就是你图标的路径
在这里插入图片描述
这块要注意，./就已经跳出build文件夹了，因为这个文件是以根目录算路径的。
同理设置生产环境就找到webpack.prod.conf，同样的设置cv一下就好了
这样就可以了

weixin_42241340
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目中如何引入icon图标
08-27
主要介绍了Vue如何引入icon图标,本文通过图文并茂的形式给大家介绍的非常详细，需要的朋友可以参考下
Vue项目添加动态浏览器头部title的方法
10-18
主要介绍了Vue项目添加动态浏览器头部title的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 动态设置系统在浏览器中的标题title和图标favicon
最新发布
宁静致远
04-06 713
vue动态修改系统title和favicon
vue项目中浏览器图标的设置
若晨工作室
09-26 2万+
在vue项目中，我们怎样设置浏览器图标？ 我们来看vue项目的目录结构，根目录下有一个index.html，这个就相当于我们普通项目中的各个html页面文件，所以设置方法就是在index.html的head标签中添加link标签。 在这里要注意的是图标文件的位置，不能放到src里，这样的路径会让浏览器找不到。网页把根域名作为相对路径的根目录了，然而我们文件的路径是相对于项目文件的根目录的，
vue项目设置浏览器icon图标
weixin_48398799的博客
05-07 3815
在vue项目开发中往往会设计到浏览器头部图标的设置，这里分享一下自己在项目中的使用的方法，如有不足的地方还望指正，直奔主题：
Vue - 设置浏览器页面头部 ico 图标
技术共享，共同进步！
05-08 5289
Vue - 设置浏览器页面头部 ico 图标
在VUE中如何显示网站ico图标
Tong_Zai_Yuan_Fang的博客
04-24 959
1.安装 html-webpack-plugin npm install html-webpack-plugin -save-v 安装成功后在package.json下会生成版本号 “file-loader”: “^1.1.4”, “friendly-errors-webpack-plugin”: “^1.6.1”, “html-webpack-plugin”: “^2.30.1”, 修改文件 2...
Vue3中element-plus全局使用Icon图标
热门推荐
yuliwen0418的博客
11-23 2万+
Vue项目中使用Element-plus的Icon图标 1、安装图标库 npm install @element-plus/icons 2、注册 main.ts文件中引入并注册 import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import * as ElIcons from '@element-plus/icons' const app = createA
vue element项目引入icon图标的方法
08-27
主要介绍了vue element项目引入icon图标的方法,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下
vue使用自定义icon图标的方法
12-11
首先因为elementUI提供的icon太少了，所有自己找找有没有矢量图可以补充的，尝试多种方法，觉得下面方法简单易懂，分享给大家 效果图： 推荐使用阿里爸爸矢量图标管理，iconfont 使用方法 登录账号，找到需要的...
vue同一组件在不同路由下展示不同样式
sven_chen93的博客
04-10 1390
vue现在很多组件是相互间引用的，但是在不同组件中展示的样式怎么调试呢 <div class="baseClass" :class="[{'specialClass':$route.name =='home'}]"> </div> 基础样式类在baseClass中定义，区别于其他组件，home路由中多了这个样式’specialClass’渲染。 这样就支持在不同路由下，样式展示不一样了。 ...
VUE设置浏览器icon图标
sinat_39648402的博客
09-22 2597
在创建Vue项目时一般会用默认的项目标题和图标，如下图所示: 不是很美观也可能不符合项目的需求，所以有时候就需要改变项目在浏览器上方的标签名称或者图标。 找到项目根目录的index.html，如图： 进去就能够修改title，也就是在浏览器上方的标题 <meta name="viewport" content="width=device-width,initial-scale=1.0"><title>template</title> 如果需要在标题旁边加
在vue中修改浏览器图标和名字
fackyoufack的博客
08-20 5438
vue中，网页图标默认使用的是vue自带的一个icon的图标，也是vue的logo。下面整理了几种改变浏览器标题和图标的方法
vue 动态加载浏览器左上角 图标 和 显示title
withme
08-31 1518
vue 动态加载浏览器左上角 图标 和 显示title 设置这个需要在路由里面通过钩子函数进行设置 图标需要创建link标签来获取 传过来的url 我这边是通过缓存来获取的 sessionStorage.getItem(‘shopLogo’) router.beforeEach((to, from, next) => { let status; var link = document.querySelector("link[rel*='icon']") || document.cr
vue中不同页面设置title和icon
次顶级的博客
07-25 548
vue项目中动态设置不同页面的icon和title信息
Vue 单页应用 路由多标签显示设计
qzonemen的专栏
09-26 1428
设计样式如图： 设计规格描述： 当某个路由被第一次打开时，在标签栏最后插入新标签，标签内容显示为 页面名称 + 关键参数值 点击某个标签时，显示该标签的路由页面 点击标签上的 × ， 如果关闭的不是当前显示的标签页，直接删除这个标签就可以了 如果关闭的是当前显示标签页，移除标签，并且后退到当前标签左边一个标签页 打开同一个路由页面时，但是传的关键参数值不同，要插入新标签页 （标签的唯一性key判断 = 路由元素数据meta..
vue修改浏览器上的页面显示的小图标icon
joan_FontEnd的博客
02-09 1318
1. 直接将这个图片换成你要的图片就可以了，名字依然用favicon.ico 2.也可以直接搜这个名字所在的位置，直接修改路径，指向你的图片
Vue爬坑之旅(二十二)：vue中添加favicon.ico
帆酱的博客
07-18 3086
在vue路由模式中添加favicon.ico语普通页面不同，仅仅在header中添加是没有效果的。 1、首先将favicon.ico图片放在根目录下 2、修改webpack配置文件 （1）找到build下的webpack.dev.conf.js文件 在plugins:[]下加入： new HtmlWebpackPlugin({ filename: 'index....
怎么修改vue项目图标和标题
09-16
在该文件中，可以找到一个类似于`document.title = 'Vue App'`的代码行，其中的'Vue App'即为项目的标题。 6. 将默认的标题修改为新的标题。例如，如果新标题为'New Vue App'，那么将代码行修改为`document.title =...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值