vue 设置浏览器的图标（图文教程）

已于 2022-05-02 23:57:19 修改
阅读量2.1k 收藏 4
点赞数 2
分类专栏： 测试开发-VUE 文章标签： 前端 vue html link 浏览器图标
于 2022-05-02 23:54:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29720657/article/details/124549096
版权

看看目录结构

注意public 下也有index.html文件，我们是改根文件 下的 index.html。

图片一类的静态文件，放在这个static文件夹下，这个文件夹下的文件（夹）会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径，这样就可以访问这些静态文件了。所以推荐将项目中的静态文件放到static文件夹下，这里把public 里面的ico文件拷贝一份到static

往index.html的head 标签加入以下代码

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

保存，查看浏览器，图标出来了

软件测试李同学
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue页面不同路由，显示不同的title
weixin_45979310的博客
09-30 346
在路由组件中，添加 meta 配置属性 { path: '/Classify', name: 'Classify', component: () => import('@/views/classify.vue' /* 分类 */ ), meta: { title: "设施分类" } }, 然后在 main.js中，设置路由导航守卫 router.beforeEach((to, from, next) =&gt
vue3浏览器调试插件
04-27
Vue3浏览器调试插件是专为开发者设计的强大工具，它极大地简化了Vue3应用程序的调试过程，让开发者能够深入理解并高效地排查Vue3应用中的问题。Vue.js是一款流行的前端框架，尤其在单页应用程序（SPA）开发中广泛...
【vue】vue项目动态设置浏览器标题title和图标：
SunPeng的博客
04-12 928
【vue】vue项目动态设置浏览器标题title和图标：
vue3项目修改浏览器的项目icon小图标
最新发布
biapang的博客
05-15 243
修改根目录下的index.html的 link 标签引入地址。
vue：设置浏览器的上的图标
weixin_34279246的博客
03-21 1989
完成一个vue项目后怎样在浏览器看到自己项目的logo呢一个的vue项目的目录 理解每个文件的含义 build中配置了webpack的基本配置、开发环境配置、生产环境配置等 config //配置目录，包括端口号和路径等 node_modules //npm加载项目的依赖模块 src //这里是我们要开发的目录，基本上要做的事情都在这个目录里。 ...
vue项目设置浏览器标题图标
程序员一枚，仅记录工作中的难点
03-31 562
【代码】vue项目设置浏览器标题图标。
vue基础之路由
weixin_45762767的博客
07-18 163
vue基础路由
vue3和vue-router4配置下的element-admin-template 权限路由，根据不同身份显示不同侧边栏（导航栏）
qq_41705342的博客
01-12 1354
element-admin-template 权限路由，根据不同身份显示不同侧边栏（导航栏）前言需要修改的几个文件步骤src/permission.jssrc/store/modules/permission.jssrc/store/modules/user.jssrc/store/getters.jssrc/store/index.jssrc/router/index.jssrc/Layout/components/Sidebar/index.vue 前言 网上大多教程都是基于vue2.x的权限路由教程，
Vue 禁用浏览器的前进后退操作
10-14
在Vue应用程序中，有时我们需要控制浏览器的前进后退（前进/后退按钮）操作，以满足特定的用户体验需求。在本文中，我们将深入探讨如何在Vue中禁用或管理这些功能，以及与`history`对象相关的一些核心概念。 首先，...
默认浏览器设置及vue自动打开页面的方法
10-17
今天小编就为大家分享一篇默认浏览器设置及vue自动打开页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue实现浏览器打印功能的代码
11-20
在Vue.js框架中实现浏览器打印功能，通常是为了满足在web应用中进行报表或者文档的打印需求。这个场景中，我们使用了一个名为`vue-easy-print`的插件，它简化了在Vue项目中调用本地打印机的过程。以下是实现这一功能...
如何利用Vue3管理系统实现动态路由和动态侧边菜单栏
weixin_51225684的博客
08-18 5303
在做Vue管理系统的时候，都会遇到的一个需求：每个用户的权限是不一样的，那么他可以访问的页面(路由)，可以操作的菜单选项是不一样的，如果由后端控制，我们前端需要去实现动态路由，动态渲染侧边菜单栏。...
vue项目设置浏览器页签图标icon
qq_43592064的博客
11-07 8163
vue项目设置浏览器页签图标icon
手把手教你更改Vue项目图标
不愧是暮言的博客
08-15 5008
除了使用第三方图标库外，你还可以自定义样式，使用项目中的自定义图标。这需要你自己设计和绘制图标，并将其转化为字体文件（通常使用SVG格式）
修改Vue3的浏览器图标和标题favicon.ico
WeiDashan的博客
10-09 926
修改Vue3的浏览器图标和标题favicon.ico
vue 修改浏览器标签页图标
qq_36958916的博客
08-17 946
vue 修改浏览器标签页图标
vue项目修改浏览器图标以及标题
青衫折扇的博客
09-20 1万+
favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置， 目前主要的浏览器都支持favicon.ico图标. 目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。 然后去index.html在head下添加： <link rel="icon" href="static/im......
vue项目中浏览器图标的设置
热门推荐
若晨工作室
09-26 2万+
在vue项目中，我们怎样设置浏览器图标？ 我们来看vue项目的目录结构，根目录下有一个index.html，这个就相当于我们普通项目中的各个html页面文件，所以设置方法就是在index.html的head标签中添加link标签。 在这里要注意的是图标文件的位置，不能放到src里，这样的路径会让浏览器找不到。网页把根域名作为相对路径的根目录了，然而我们文件的路径是相对于项目文件的根目录的，
VUE设置浏览器icon图标
CatEatApple的专栏
03-15 895
Vue怎么设置左上角icon图标呢？步骤如下： （1）、提前把icon图标copy到static目录下 （2）、在index.html页面添加&lt;link rel ="shortcut icon" type="image/x-icon" href="static/favicon.ico"&gt; （3）、保存页面刷新浏览器即可 ...
vue关闭浏览器窗口触发事件
09-19
在Vue中关闭浏览器窗口时触发事件有多种方法。以下是其中之一： 可以使用window对象上的beforeunload事件来实现。beforeunload事件在窗口即将关闭之前触发，可以通过在Vue组件的created或mounted生命周期钩子函数中监听该事件。 首先，在Vue组件的created或mounted钩子函数中添加事件监听器，代码如下： ```javascript created() { window.addEventListener('beforeunload', this.handleBeforeUnload) }, mounted() { window.addEventListener('beforeunload', this.handleBeforeUnload) }, methods: { handleBeforeUnload() { // 在这里编写处理窗口关闭事件的逻辑 // 可以进行一些清理操作或弹出确认提示框等 } } ``` 在handleBeforeUnload方法中，可以编写处理窗口关闭事件的自定义逻辑。可以在这里进行一些清理操作，比如保存未提交的数据，关闭与服务端的连接等。 需要注意的是，在Vue组件销毁时，要记得移除beforeunload事件的监听器，避免内存泄漏。可以在Vue组件的beforeDestroy钩子函数中移除事件监听器，代码如下： ```javascript beforeDestroy() { window.removeEventListener('beforeunload', this.handleBeforeUnload) } ``` 以上就是使用Vue关闭浏览器窗口触发事件的一种方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

软件测试李同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值