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 文件夹中搜索了十六进制代码#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

您可以将所有清单选项放入其中pwa.manifestOptions。你的里面会是这样的vue.config.js：

module.exports = {
  pwa: {
    manifestOptions: {
      name: "App Name",
      short_name: "Short Name",
      start_url: "./",
      display: "standalone",
      theme_color: "#000000",
      icons: [
        {
          src: "./favicon.svg",
          sizes: "512x512",
          type: "image/svg+xml",
          purpose: "any maskable",
        },
      ],
    },

    themeColor: "#4DBA87",
    msTileColor: "#000000",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
    iconPaths: {
      maskicon: null,
      favicon32: "./favicon32.png",
      favicon16: "./favicon16.png",
      appleTouchIcon: null,
      msTileImage: null,
    },
    // configure the workbox plugin
    workboxPluginMode: "GenerateSW",
  },
};

查看 LinusBorg 对这个问题的回答。

Answer 2

@vue/cli-plugin-pwa插件内部使用了webpack的workbox插件。您获得的颜色#4DBA87是插件设置的默认颜色。您可以在这里阅读有关此插件配置的更多信息，https://www.npmjs.com/package/@vue/cli-plugin-pwa

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

"vue": {
  "pwa": {
    "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",
    },
  }
}