欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue 修改网页标题和图标

程序员文章站 2022-06-27 20:20:01
Vue 修改网页标题和图标 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.5.2 需求描述 如下,想更改网页的标题和图标 解决方法 编辑项目根目录下的index.html,如下: 更改标题: 修改元素内容即可 修改图标: 把要修改的图片放static目录下 ......</div> <div class="content"> <p align="center"><span style="font-family: 'courier new', courier;"><strong>vue </strong><strong>修改网页标题和图标</strong></span></p> <p align="center"><span style="font-family: 'courier new', courier;"><strong> </strong></span></p> <p align="right"><span style="font-family: 'courier new', courier;"><strong>by:</strong><strong>授客</strong><strong> qq</strong><strong>:</strong><strong>1033553122</strong></span></p> <p class="1" align="left"><span style="font-family: 'courier new', courier;"><strong> </strong></span></p> <h1><span style="font-family: 'courier new', courier;">开发环境</span></h1> <p align="left"><span style="font-family: 'courier new', courier;"><strong> </strong></span></p> <p align="left"><span style="font-family: 'courier new', courier;"><strong>win 10</strong></span></p> <p align="left"><span style="font-family: 'courier new', courier;"><strong> </strong></span></p> <p><span style="font-family: 'courier new', courier;">vue 2.5.2</span></p> <h1><span style="font-family: 'courier new', courier;">需求描述</span></h1> <p><span style="font-family: 'courier new', courier;">如下,想更改网页的标题和图标</span></p> <p><span style="font-family: 'courier new', courier;"> <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDA0MjAvYl8wXzIwMjAwNDIwMTU1MzIyOTI4Mi5wbmc=" alt="Vue 修改网页标题和图标" title="Vue 修改网页标题和图标"></span></p> <p> </p> <p><span style="font-family: 'courier new', courier;"> </span></p> <h1><span style="font-family: 'courier new', courier;">解决方法</span></h1> <p><span style="font-family: 'courier new', courier;">编辑项目根目录下的index.html,如下:</span></p> <p><span style="font-family: 'courier new', courier;"><strong>更改标题:</strong></span></p> <p><span style="font-family: 'courier new', courier;">修改<title>元素内容即可</span></p> <p><span style="font-family: 'courier new', courier;"> </span></p> <p><span style="font-family: 'courier new', courier;"><strong>修改图标:</strong></span></p> <p><span style="font-family: 'courier new', courier;">把要修改的图片放static目录下(注意:图片不能放src目录下,亲测无效),然后添加<link>元素</span></p> <p><span style="font-family: 'courier new', courier;"> </span></p> <p align="left"><span style="font-family: 'courier new', courier;"><!doctype html></span></p> <p align="left"><span style="font-family: 'courier new', courier;"><html></span></p> <p align="left"><span style="font-family: 'courier new', courier;">    <head></span></p> <p align="left"><span style="font-family: 'courier new', courier;">        <meta charset="utf-8"></span></p> <p align="left"><span style="font-family: 'courier new', courier;">        <meta name="viewport" content="width=device-width,initial-scale=1.0"></span></p> <p align="left"><span style="font-family: 'courier new', courier;">        <title>xxxx管理平台</title></span></p> <p align="left"><span style="font-family: 'courier new', courier;"><em>        </em><em><</em><em>link</em><em> </em><em>rel</em><em>=</em><em>"icon"</em><em> </em><em>type</em><em>=</em><em>"image/x-icon"</em><em> </em><em>href</em><em>=</em><em>"./static/favicon.png"</em><em>></em></span></p> <p align="left"><span style="font-family: 'courier new', courier;"> </span></p> <p align="left"><span style="font-family: 'courier new', courier;">    </head></span></p> <p align="left"><span style="font-family: 'courier new', courier;"><body></span></p> <p align="left"><span style="font-family: 'courier new', courier;">    <divid="app"></div></span></p> <p align="left"><span style="font-family: 'courier new', courier;">    <!-- built files will be auto injected --></span></p> <p align="left"><span style="font-family: 'courier new', courier;"></body></span></p> <p align="left"><span style="font-family: 'courier new', courier;"></html></span></p> <p align="left"><span style="font-family: 'courier new', courier;"> </span></p> <p align="left"><span style="font-family: 'courier new', courier;"> </span></p> <p><span style="font-family: 'courier new', courier;"> </span></p> </div> <div class="info-pre-next"> <p> 上一篇: <a href="/article/1556065.html"> 华为Mate X2售价17999元起 真机高清实拍:新折叠设计精妙绝伦 </a> </p> <p> 下一篇: <a href="/article/1556067.html"> 企业级自动化部署方案——ansible实现tomcat自动安装和配置 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2040649.html" target="_blank" title="频繁修改网站标题和描述会被降权么?网站标题和描述如何修改不会被降权?"> <h2> 频繁修改网站标题和描述会被降权么?网站标题和描述如何修改不会被降权? </h2> </a> </li> <li> <a href="/article/2037784.html" target="_blank" title="Vue响应式添加、修改数组和对象的值"> <h2> Vue响应式添加、修改数组和对象的值 </h2> </a> </li> <li> <a href="/article/1897838.html" target="_blank" title="通过vue-cli来学习修改Webpack多环境配置和发布问题"> <h2> 通过vue-cli来学习修改Webpack多环境配置和发布问题 </h2> </a> </li> <li> <a href="/article/1878895.html" target="_blank" title="php获取网页标题和内容函数(不包含html标签)"> <h2> php获取网页标题和内容函数(不包含html标签) </h2> </a> </li> <li> <a href="/article/1827698.html" target="_blank" title="Vue动态修改网页标题的方法及遇到问题"> <h2> Vue动态修改网页标题的方法及遇到问题 </h2> </a> </li> <li> <a href="/article/1700056.html" target="_blank" title="Vue 父子组件的数据传递、修改和更新方法"> <h2> Vue 父子组件的数据传递、修改和更新方法 </h2> </a> </li> <li> <a href="/article/1677873.html" target="_blank" title="荐 四十一、Vue项目上手 | 用户管理系统 实现用户修改和删除功能(完成篇)"> <h2> 荐 四十一、Vue项目上手 | 用户管理系统 实现用户修改和删除功能(完成篇) </h2> </a> </li> <li> <a href="/article/1660092.html" target="_blank" title="vue实现个人信息查看和密码修改功能"> <h2> vue实现个人信息查看和密码修改功能 </h2> </a> </li> <li> <a href="/article/1654644.html" target="_blank" title="RTSP网络摄像头网页无插件直播视频平台EasyNVR自定义标题和CopyRight步骤"> <h2> RTSP网络摄像头网页无插件直播视频平台EasyNVR自定义标题和CopyRight步骤 </h2> </a> </li> <li> <a href="/article/1649197.html" target="_blank" title="vs2010怎么修改QT窗口图标和名称?"> <h2> vs2010怎么修改QT窗口图标和名称? </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益,请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号:<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>