vue改页面顶部浏览器标题栏图标、名称和地址栏详细教程

最新推荐文章于 2024-03-01 17:58:44 发布
最新推荐文章于 2024-03-01 17:58:44 发布
阅读量1w 收藏 17
点赞数 9
分类专栏： vue.js 页面小技巧（小实例） 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beLaity/article/details/106940364
版权

更改图标：首先在文件目录下找到public文件夹
在这里插入图片描述
接着在文件目录中找到favicon.ico改成你想要换的图标（换的图标一定要是ico结尾，可以去百度搜一下icon图标生成器转一下）
在这里插入图片描述
更改标题：方法一：接着在文件目录中找到package.json文件
在这里插入图片描述
在package.json文件中找到name，改成你想要的名字
在这里插入图片描述
方法二：
在文件中新建vue.config.js文件
在这里插入图片描述
并在文件中配置如下图：
在这里插入图片描述
效果如下
在这里插入图片描述

修改地址栏域名
在文件中新建vue.config.js文件
在这里插入图片描述
在文件中配置如下图：
在这里插入图片描述
效果如下：
在这里插入图片描述

苟圣啊
关注
  • 9
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
使用ajax实现无刷新改变页面内容和地址栏URL
10-24
本文主要详细介绍了使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL的方法,需要的朋友可以参考下
vue实现导航标题栏随页面滚动渐隐渐显效果
10-15
主要介绍了vue实现导航标题栏随页面滚动渐隐渐显效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
在vue中修改浏览器图标和名字
fackyoufack的博客
08-20 5355
vue中，网页图标默认使用的是vue自带的一个icon的图标，也是vue的logo。下面整理了几种改变浏览器标题和图标的方法
vue3修改项目在浏览器的图标和项目名字
log_zhu的博客
10-18 1825
【代码】vue3修改项目在浏览器的图标和项目名字。
【Vue】更换浏览器默认 logo
最新发布
weixin_47375144的博客
03-01 711
vue项目替换浏览器自带logo
Vue中设置浏览器标签栏图标以及title标题
qq_61739122的博客
05-26 4250
设置浏览器标签以及title标签 document.title
vue 浏览器上的地址名称
weixin_47226062的博客
03-31 1076
在router – index.js文件中添加代码 router.beforeEach((to, from, next) => { // 设置路由跳转title名 console.log('',to); if (to.meta.title) { // 动态的title document.title = to.meta.title }else{ // 如果没有title 写死为自己的系统名称或者其他 document.title = 'js是世界上最好的语言'.
vue设置浏览器顶部小图标
我不是程序员的博客
07-27 2745
vue 设置网页顶部小图标 1.首先准备一个size为32px(或者其它较小size)的图片 可以去阿里巴巴矢量图网站上面搜索自己喜欢的[地址:](https://www.iconfont.cn/) 或者自己用ps设计自己喜欢的 2.把图片名字改成"favicon.ico" 把改完名字的图片放在项目根目录下面(如下图所示:) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200727165713736.png?x-oss-process=image/watermar
前端热门框架Vue3.x自定义组件实现头部导航栏教程
02-05
Vue 3 更新了许多组件中的语法，包括生命周期、filter、setup、teleport 等，为了学习这些特性，需要先了解一下 Vue 组件的基本玩法。 目前关于Vue3.x的资料较少，为了帮助大家掌握Vue3.x技术，老师通过小案例的方式带领大家熟悉Vue.3x实现头部导航栏应用。
vue3-动态修改浏览器标签名称
if_smile的博客
03-10 1452
vue3-动态修改浏览器标签名称
Vue中设置浏览器标签栏图标以及title
前端-卡布达的博客
02-12 1万+
1、设置浏览器标签栏图标 使用脚手架创建的项目，已经将标签栏图标设置好了，默认的是vue的图标。如果需要修改，只需要将public文件夹下面的favicon.icon文件替换为我们自己的图标即可 2、浏览器标签栏title修改 title的修改有很多种方法，我使用的是路由配置中的路由元信息结合路由导航钩子来实现的 import Vue from 'vue' import VueRouter from 'vue-router' import Login ...
vue设置页面title
qq_17627195的博客
03-04 6365
vue默认的title是项目的名称，需要进行修改，有两种方法。 方法一： 在 ./public/index.html 文件中直接修改。 方法二： 可以根据单个页面设置title。 打开设置路由（router）的文件（我的直接是router.js，有些是 ./router/index.js）, 在每一个路由设置下面增加meta，然后设置title 打开 main.js 文件，然后加入下列代码。 router.beforeEach((to, from, next) => { /* 路由发
Vite构建的vue3项目修改网站标题和图标
maohe的博客
07-27 3310
记录 vite + vue3 + ts 项目修改网站标题和网站图标。
vue地址栏直接输入路由无效问题的解决
10-17
主要介绍了vue地址栏直接输入路由无效问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue实现顶部菜单栏
01-18
vue实现顶部菜单栏，同一个页面两个菜单按钮之间的切换 先看展示结果： 点击第一个按钮，显示内容1 点击第二个按钮，展示内容2 下面上源码：注意哦，一定要代码规划，别学我(⊙o⊙) ...
Uncaught ReferenceError: Vue is not defined解决方案，一看就懂
热门推荐
beLaity的博客
06-24 1万+
没有引入vue,在使用vue之前，必须先导入vue.js文件 //方法一：BootCDN引入 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> //方法二：直接下载vue.js，并用 <script> 标签引入，Vue 会被注册为一个全局变量。 //方法三：npm终端下载 npm install vue ...
vue3/4填坑（解决报错：Compiled with 1 warnings：warning Delete `⏎····` prettier/pret (0 errors, 2 warnings）
beLaity的博客
09-08 9730
在我们初学vue3.0，修改vue-cli生成的HellowWorld.vue文件时就会出现这种报错（很容易才到这个坑） Compiled with 1 warnings：Module Warning (from ./node_modules/eslint-loader/index.js): warning Delete ⏎···· prettier/prettier warning Insert · prettier/prettier 解决办法： 在项目的根目录打开控制台，输入以下命令，
Vue3.0+ts脚手架基础使用详细教程（基于node.js，构建项目（两种方式）、预设，手把手教学）
beLaity的博客
09-10 1296
先安装node.js，再安装vue-cli 点此见另一边文章（很详细） window键+R打开终端输入 cmd（安装完成之后在进行以下操作） 点击确定进入终端 进入你想要在的文件夹，并输入vue create demos（demos是项目名，可以用我的，你也自己起的）然后按下回车键，会出现选择创建方式，选择最后一个：自定义配置 键盘上下键选择，然后回车 键盘上下键移动，空格键选择，选择后括号会出现*号，然后回车 默认2.x直接回车（3.x才刚刚发布） 以上预设配置我是这么选择的； 最后一..
vue-antd-admin标题栏图标
07-25
vue-antd-admin的标题栏图标可以通过修改配置文件来实现。具体来说，可以在项目的配置文件中找到`src/config/settings.js`，然后在该文件中找到`title`和`logo`字段。`title`字段用于设置标题栏的标题，而`logo`字段用于设置标题栏的图标。你可以将`logo`字段的值修改为你想要的图标路径，然后重新编译项目即可。请注意，图标路径应该是相对于项目根目录的路径。 #### 引用[.reference_title] - *1* *3* [vue-antd-admin使用体验(一) 概述](https://blog.csdn.net/finedayforu/article/details/109639925)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue-antd-admin测试平台开发(一)](https://blog.csdn.net/qq_41969287/article/details/123469294)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

苟圣啊

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

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

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

打赏作者

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

抵扣说明：

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

余额充值