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

Question

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

如您所见，生成了几个图标，它们是自动注入到 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个文件。

Answer 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>

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

How to edit auto injected favicon tags inside header of a Vue Cli genereated WPA project?

html

vue.js

favicon

vue-cli