如何在 Vue Cli 生成的 WPA 项目的标题内编辑自动注入的网站图标标签？

Posted 2023-02-22

【中文标题】如何在 Vue Cli 生成的 WPA 项目的标题内编辑自动注入的网站图标标签？

【英文标题】：How to edit auto injected favicon tags inside header of a Vue Cli genereated WPA project?

【发布时间】：2020-04-06 20:37:35

【问题描述】：

如果您使用@vue/cli 4.1.1 创建一个新项目具有功能(x) Progressive Web App (PWA) Support启用，您生成的项目结构如下所示：

如您所见，生成了几个图标，它们自动注入到 html head：

Index.html：

  <title>wproj</title>
</head>

渲染的Index.html：

  <title>wproj</title>
  <link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#4DBA87">
  <meta name="apple-mobile-web-app-capable" content="no">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="wproj">
  <link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png">
  <link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87">
  <meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png">
  <meta name="msapplication-TileColor" content="#000000">
</head>

问题：这些自动注入的属性是在哪里定义的？如何编辑它们（例如删除一个）？

没有manifest.json文件。

【参考方案1】：

路径由@vue/cli-plugin-pwa 配置。在文档中，您可以在配置中找到 pwa.iconPaths。可以看到，iconPaths 的默认值为

   favicon32: 'img/icons/favicon-32x32.png',
   favicon16: 'img/icons/favicon-16x16.png',
   appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
   maskIcon: 'img/icons/safari-pinned-tab.svg',
   msTileImage: 'img/icons/msapplication-icon-144x144.png'

对应于注入到您的 index.html 中的文件。

可以使用 vue.config.js 文件更改配置。比如这个内容

module.exports = 
  pwa: 
    iconPaths: 
      favicon32: "TEST"
    
  
;

在配置文件中导致 favicon32 的输出为

<link rel=icon type=image/png sizes=32x32 href=/TEST>