返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue3.0如何修改浏览器标题(静态)
  • 503
分享到

vue3.0如何修改浏览器标题(静态)

2024-04-02 19:04:59 503人浏览 泡泡鱼
摘要

目录vue3.0修改浏览器标题Vue项目设置浏览器上方的项目标题和图标(注意图标放置位置)1.设置自定义图标注意点2.话不多说,直接上代码3.展示效果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.展示效果

修改成功

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue3.0如何修改浏览器标题(静态)

本文链接: https://lsjlt.com/news/167293.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue3.0如何修改浏览器标题(静态)
    目录vue3.0修改浏览器标题vue项目设置浏览器上方的项目标题和图标(注意图标放置位置)1.设置自定义图标注意点2.话不多说,直接上代码3.展示效果vue3.0修改浏览器标题 新建...
    99+
    2024-04-02
  • win11如何修改默认浏览器
    这篇文章主要讲解了“win11如何修改默认浏览器”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“win11如何修改默认浏览器”吧!win11修改默认浏览器的方法:第一步,点击底部windows...
    99+
    2023-06-30
  • javascript如何修改浏览器title方法
    这篇文章主要介绍javascript如何修改浏览器title方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!title在html中属于特殊的节点元素.因为它可以使用document...
    99+
    2024-04-02
  • vue中使用路由改浏览器标题和图标
    目录路由改浏览器标题和图标 第一种方法:设置浏览器标题 第二种方法:设置浏览器标题和图标创建路由,随路由显示网页标题一、创建一个新的vue项目二、路由映射的就是页...
    99+
    2024-04-02
  • windows谷歌浏览器ua标识如何更改
    这篇文章主要讲解了“windows谷歌浏览器ua标识如何更改”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“windows谷歌浏览器ua标识如何更改”吧!谷歌浏览器ua标识更改的方法:进入谷歌...
    99+
    2023-07-01
  • win10电脑如何修改默认浏览器
    本篇内容介绍了“win10电脑如何修改默认浏览器”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!win10电脑修改默认浏览器教程方法一: 点击...
    99+
    2023-07-02
  • windows edge浏览器缓存位置如何修改
    这篇文章主要讲解了“windows edge浏览器缓存位置如何修改”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“windows edge浏览器缓存位置如何修改”吧!edge浏览器缓存位置更改...
    99+
    2023-07-01
  • vue动态设置浏览器标题的方法详解
    目录废话正文第一种router/index.js 第二种1.安装插件2.main.js 引用3.添加指令笔记总结 废话 平时设置浏览器标题是这样的 但vue是单页面应用,入口文件...
    99+
    2024-04-02
  • java如何修改静态变量的值
    要修改Java中的静态变量的值,可以直接通过类名来访问静态变量并赋值。例如: public class Example { ...
    99+
    2024-04-02
  • win10浏览器修改不了主页如何解决
    要解决Win10浏览器无法修改主页的问题,可以尝试以下方法:1. 确保你有管理员权限:在修改浏览器设置之前,确保你的用户账户具有管理...
    99+
    2023-08-30
    win10
  • vue动态设置浏览器标题的方法有哪些
    这篇“vue动态设置浏览器标题的方法有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“v...
    99+
    2024-04-02
  • vue动态设置浏览器标题的方法是什么
    本篇文章给大家分享的是有关vue动态设置浏览器标题的方法是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。废话平时设置浏览器标题是这样的但vue是单页面应用,入口文件也只有一...
    99+
    2023-06-22
  • 设置vue动态浏览器标题的方法有哪些
    设置vue动态浏览器标题的方法有哪些,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。本篇文章给大家带来了关于怎样利用vue来实现动态设置浏览器标题的效果,希望对大...
    99+
    2023-06-22
  • win7默认浏览器如何更改
    这篇文章主要介绍了win7默认浏览器如何更改的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇win7默认浏览器如何更改文章都会有所收获,下面我们一起来看看吧。win7默认浏览器更改教程首先在开始菜单中打开“控制面...
    99+
    2023-07-01
  • win11如何修复edge浏览器
    要修复Edge浏览器在Windows 11上的问题,可以尝试以下方法:1. 重启电脑:首先,尝试重新启动计算机,这可以解决临时的问题...
    99+
    2023-09-18
    win11
  • RK3288如何修改浏览器默认主页和书签
    这篇文章主要介绍RK3288如何修改浏览器默认主页和书签,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!修改浏览器默认主页:<!-- The default homepage.&nb...
    99+
    2023-06-05
  • javascript如何修改h2标题
    本篇内容主要讲解“javascript如何修改h2标题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript如何修改h2标题”吧! ...
    99+
    2024-04-02
  • vue中修改浏览器图标和名字的几种方式
    目录前言1.修改图标样式01.使用图片02.使用图标2.修改浏览器名字设置01.直接修改02.根据后端的传值动态修改名字03.在vue中使用插件的方式04.路由守卫中进行修改总结前言...
    99+
    2022-11-13
    vue修改浏览器的标题 vue中修改浏览器图标不显示 更改浏览器图标
  • ie浏览器漏洞如何修复
    修复ie浏览器漏洞的方法首先,在计算机中打开ie浏览器;ie浏览器打开后,在浏览器中点击右上角“工具”选项,并下拉中选择“Internet 选项”;在弹出的Internet 选项对话框中,切换到“安全”选项卡;进入到安全选项卡页面后,在页面...
    99+
    2024-04-02
  • windows edge浏览器flash如何修复
    本文小编为大家详细介绍“windows edge浏览器flash如何修复”,内容详细,步骤清晰,细节处理妥当,希望这篇“windows edge浏览器flash如何修复”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧...
    99+
    2023-07-01
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作