vue3.0如何修改浏览器标题(静态)
更新时间：2022年09月10日 09:42:39 作者：唐文军
这篇文章主要介绍了vue3.0如何修改浏览器标题(静态)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue3.0修改浏览器标题
新建vue项目的时候它的标题默认拿项目名称… 大多数时候这是不对的.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
这个时候我们只需要改一下 public 文件夹下的index.html的title标签内容就好了
不过自己玩的时候会这样写… 哈哈
一般来说要上线或者说企业级项目都是放在后台的配置文件里面。 因为打包部署在服务器上 配置文件不会被打包进去，到时候要换浏览器图片直接换就ok了.
vue项目设置浏览器上方的项目标题和图标(注意图标放置位置)
1.设置自定义图标注意点
项目根目录的index.html，进行设置：【注】
设置自定义的图标，需要把自己的的图片放在static目录下（与src同级目录，不要放在src目录下，浏览器会找不到）
2.话不多说，直接上代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>XXXX管理平台</title> <link rel="icon" type="image/x-icon" href="./static/logo.png" rel="external nofollow" > </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
3.展示效果
修改成功
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要为大家介绍了vue2从数据变化到视图变化发布订阅模式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
在编写Vue代码的时候,经常会碰到各种权限问题,本文主要介绍了Vue按钮权限的实现示例,具有一定的参考价值,感兴趣的可以了解一下2024-08-08
这篇文章主要为大家详细介绍了Vue验证用户名是否可用的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要给大家介绍了关于Vue代码分割懒加载的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
这篇文章主要介绍了彻底搞懂并解决vue-cli4中图片显示的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
本篇文章主要介绍了vue 2.0封装model组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
今天小编就为大家分享一篇vue之a-table中实现清空选中的数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
Jenkins Sidebar Link插件实现添加侧边栏功能详解
这篇文章主要介绍了vue框架实现添加侧边栏，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据，整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下2021-10-10
最新评论