Vue PWA插件-清单不使用我的配置属性

Question

这很奇怪。我安装了VuePWA-Plugin并将其配置在package.json中，如下所示：

"pwa": {
    "name": "Poolio",
    "themeColor": "#205c94",
    "msTileColor": "#205c94",
    "display": "fullscreen",
    "appleMobileWebAppCapable": "yes",
    "appleMobileWebAppStatusBarStyle": "#205c94",
    "pwa.iconPaths": {
      "favicon32": "./img/icons/favicon-32x32.png",
      "favicon16": "./img/icons/favicon-16x16.png",
      "favicon96": "./img/icons/favicon-96x96.png",
      "appleTouchIcon": "./img/icons/apple-icon-152x152.png",
      "msTitleImage": "./img/icons/ms-icon-144x144.png"
    }
  },

但是它不会在manifest.json中使用我的任何设置（在名称旁边，但是必须由其他设置使用，因为如果我更改它，则它不会更改）

我问自己，themeColor在哪里，所以我在Hole App文件夹中搜索了清单4中的＃4DBA87十六进制代码。但是什么也没找到...

此处显示清单输出：

{
    "name": "Poolio",
    "short_name": "Poolio",
    "theme_color": "#4DBA87",
    "icons": [
        { "src": "./img/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
        { "src": "./img/icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" },
        { "src": "./img/icons/android-chrome-maskable-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
        { "src": "./img/icons/android-chrome-maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
    ],
    "start_url": ".",
    "display": "standalone",
    "background_color": "#000000"
}

Answer 1

@vue/cli-plugin-pwa插件内部使用webpack的workbox插件。您获得的颜色#4DBA87是插件设置的默认颜色。您可以在https://www.npmjs.com/package/@vue/cli-plugin-pwa

上阅读有关此插件配置的更多信息。

要根据您的喜好通过package.json对其进行配置，必须将您的配置放入vue属性中。例如：

"vue": {
    "name": "Poolio",
    "themeColor": "#205c94",
    "msTileColor": "#205c94",
    "appleMobileWebAppCapable": "yes",
    "appleMobileWebAppStatusBarStyle": "#205c94",
    "iconPaths": {
      "favicon32": "./img/icons/favicon-32x32.png",
      "favicon16": "./img/icons/favicon-16x16.png",
      "favicon96": "./img/icons/favicon-96x96.png",
      "appleTouchIcon": "./img/icons/apple-icon-152x152.png",
      "msTitleImage": "./img/icons/ms-icon-144x144.png"
    },
    "workboxPluginMode": "InjectManifest",
    "workboxOptions": {
      "swSrc": "src/service-worker.js",
    },
}