Vue2 pwa 添加奇怪的图标

Question

我不知道这是怎么发生的，也不知道为什么会发生。在我的 vue.config.js 文件中我有这样的设置：

pwa: {
  name: "Example",
  themeColor: "#081d4d",
  backgroundColor: "#FFFFFF",
  assetVersion: Date.now(),
  workboxOptions: {
    exclude: [
      /web\.config$/,
    ],
  },
  manifestOptions: {
    icons: [{
        src: "assets/icons/android-icon-36x36.png",
        sizes: "36x36",
        type: "image/png",
      },
      {
        src: "assets/icons/android-icon-48x48.png",
        sizes: "48x48",
        type: "image/png",
      },
      {
        src: "assets/icons/android-icon-72x72.png",
        sizes: "72x72",
        type: "image/png",
      },
      {
        src: "assets/icons/android-icon-96x96.png",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "assets/icons/android-icon-144x144.png",
        sizes: "144x144",
        type: "image/png",
      },
      {
        src: "assets/icons/android-icon-192x192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-57x57.png",
        sizes: "57x57",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-60x60.png",
        sizes: "60x60",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-72x72.png",
        sizes: "72x72",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-76x76.png",
        sizes: "76x76",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-114x114.png",
        sizes: "114x114",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-120x120.png",
        sizes: "120x120",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-144x144.png",
        sizes: "144x144",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-152x152.png",
        sizes: "152x152",
        type: "image/png",
      },
      {
        src: "assets/icons/apple-icon-180x180.png",
        sizes: "180x180",
        type: "image/png",
      },
      {
        src: "assets/icons/favicon-16x16.png",
        sizes: "16x16",
        type: "image/png",
      },
      {
        src: "assets/icons/favicon-32x32.png",
        sizes: "32x32",
        type: "image/png",
      },
      {
        src: "assets/icons/favicon-96x96.png",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "assets/icons/favicon-512x512.png",
        sizes: "512x512",
        type: "image/png",
      },
      {
        src: "assets/icons/ms-icon-70x70.png",
        sizes: "70x70",
        type: "image/png",
      },
      {
        src: "assets/icons/ms-icon-144x144.png",
        sizes: "144x144",
        type: "image/png",
      },
      {
        src: "assets/icons/ms-icon-150x150.png",
        sizes: "150x150",
        type: "image/png",
      },
      {
        src: "assets/icons/ms-icon-310x310.png",
        sizes: "310x310",
        type: "image/png",
      },
    ],
  },
},

而我的 index.html 只有对网站图标的引用：

<link rel="icon" href="<%= BASE_URL %>favicon.ico?v=1519211809934">

但出于某种原因，每当我构建我的应用程序时，我都会看到：

有谁知道他们来自哪里？我在任何地方都找不到谈论它的东西:(

Answer 1

它是 pwa.iconPaths 配置的一部分。您可以将正确大小的图标放在 img/icons/favicon-32x32.png 和 img/icons/favicon-16x16.png 或更新您的配置以覆盖默认值。

pwa: {
  name: "Example",
  themeColor: "#081d4d",
  backgroundColor: "#FFFFFF",

  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'
}

理想情况下，您应该实现所有五个图标，这样默认图标就不会在其他平台上意外使用。

Vue2 pwa 添加奇怪的图标

Vue2 pwa adding strange favicons

vuejs2

progressive-web-apps

favicon