如何更改vue项目窗口的标题title和图标icon

这篇具有很好参考价值的文章主要介绍了如何更改vue项目窗口的标题title和图标icon。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景:由以下代码知,Vue CLI创建的项目窗口的标题默认是打包后的项目名称,默认图标是Vue的图标favicon.ico。那么特定项目如何根据需要在窗口展示相应的项目标题和项目图标呢?

<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>

解决方法:

修改图标:直接将新图标导入public文件夹,然后将favicon.ico替换为新图标的名字即可,此处可以不用ico文件,但是为了规范,还是将图片转为ico文件更好

<link rel="icon" href="<%= BASE_URL %>darcy.ico">

修改标题:

  •  法一:若项目名称需修改为“darcy练手项目”,那么直接在<title>标签中填入项目名称即可。     
    <title><darcy练手项目</title>
  • 法二:修改vue.config.js文件                                                                                                      

    module.exports = {
     pages: {
        index: {
          template: 'public/index.html',
          entry: 'src/main.ts',
          filename: 'index.html',
          title:'darcy练手项目',
        }
      }
    }

 参考:https://juejin.cn/post/6890422765724106765              https://juejin.cn/post/7098509207216848904

与君共勉,请多多点赞收藏评论~文章来源地址https://www.toymoban.com/news/detail-558251.html

到了这里,关于如何更改vue项目窗口的标题title和图标icon的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue设置页面标题title

    1. 每个页面设置相同标题 index.html 直接修改title标签里面的标题 (ps: 这个html文件中也可以引入一些js文件) 2. 每个页面设置不同标题 router - index.js main.js

    2024年02月15日
    浏览(39)
  • Rust UI开发(二):iced中如何为窗口添加icon图标

    注:此文适合于对rust有一些了解的朋友 iced是一个跨平台的GUI库,用于为rust语言程序构建UI界面。 想要了解如何构建简单窗口的可以看本系列的第一篇: Rust UI开发:使用iced构建UI时,如何在界面显示中文字符 本篇是系列第二篇,主要解决一个问题,就是为窗口添加图标ic

    2024年02月04日
    浏览(58)
  • ImGui界面优化:使用图标字体、隐藏主窗口标题栏

    目录 使用图标字体 扩展:内存加载字体 隐藏主窗口标题栏 增加程序退出 改进HideTabBar 窗口最大化 总结 本文主要介绍ImGui应用中的一些界面优化方法,如果是第一次使用ImGui推荐从上一篇文章开始:使用C++界面框架ImGUI开发一个简单程序,最终的界面效果如下: 下载IconFont

    2024年02月11日
    浏览(276)
  • 【Python】使用pyside2时qt designer 设计窗口显示图标icon但是运行后不显示(图文说明)

    欢迎关注 『Python』 系列,持续更新中 欢迎关注 『Python』 系列,持续更新中 平时用的不多,也不知道这个报错有没有偶然性,或者是我自己搞错了···仅供参考。 toolBar中的图标在designer中显示正常 在菜单栏中的显示正常 窗口的title属性用英文,想要中文的话,在初始化中

    2024年02月10日
    浏览(40)
  • vue 页签图标 icon 修改设置

    最近在写 Vue 项目时,有一个需求是替换页签的图标,不过在网上查了好久,发现没有一个是生效的 最后结合了两篇文章里的内容,才将这个需求实现,现在来记录一下   在 vue.config.js文件中添加以下代码:   然后在 public/index.html文件中修改原 icon 代码,将 link rel=\\\"icon\\\" hre

    2024年02月19日
    浏览(32)
  • 微信小程序项目中使用icon图标

    效果: 步骤: 1、先让ui负责人把你的账号加入到项目中,加入到项目中后就可以在icon图标库中看到该项目 2、在小程序中使用 新建一个view,在上面加一个class,复制icon名字上去即可,注意格式,格式为iconfont icon名。 iconfont这个前缀不是固定的,根据icon名字来,icon的前缀为

    2024年02月11日
    浏览(57)
  • 如何给网页添加icon图标?

    做一些小页面或者项目的时候,我们会发现每个网站都有自己的小图标,下面我就告诉你怎么弄这个,超简单的!💜💜 网页图标favicon.ico小简介 favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏、浏览器标签上或者在收藏夹上,是展示网站个性的缩略logo标志

    2024年02月05日
    浏览(31)
  • 什么是字体图标(Icon Font)?如何在网页中使用字体图标?

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月11日
    浏览(44)
  • 关于vue3+版本引入element-ui使用icon问题 (icon不显示问题)vue3中input里面不显示icon图标

    1)、引入  2)、效果: 出来了一个大图标  3)、代码 1)、引入  2)、效果:  3)、代码

    2024年02月16日
    浏览(52)
  • Vue Element-UI使用icon图标(第三方)--在线版

    Element-ui一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,在Vue中使用是很方便的。 关于引用icon(第三方),有一种不用下载项目到本地的方法, element自带的有icon,使用起来也很方便。但是美中不足的是,官方提供的图标库只是部分,在需要新的icon时,

    2024年02月06日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包