更改vue项目的浏览器图标与标头

呆子小木心

于 2021-03-25 16:12:22 发布

阅读量632

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/cc6_66/article/details/115211392

版权

vue 专栏收录该内容

50 篇文章

订阅专栏

本文介绍如何在Vue项目中更改浏览器图标及页面标题。通过编辑index.html文件中的链接和标题标签，以及配置vue.config.js来实现自定义的图标与标头。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更改vue项目的浏览器图标与标头

修改public文件里面的index.html文件，如果不在index.html不放在public文件夹里面的，在根目录找到或者其他地方

 <link rel="icon" type="image/x-icon" href="<%= BASE_URL %>/wb_school.svg" />
 <title>XXXXX管理平台</title>

在根目录中找到vue.config.js中加上

pwa: {
    iconPaths: {
      favicon32     : 'wb_school.svg',
      favicon16     : 'wb_school.svg',
      appleTouchIcon: 'wb_school.svg',
      maskIcon      : 'wb_school.svg',
      msTileImage   : 'wb_school.svg'
    }
  }