vue.js - Vue PWA 插件 - list 不使用我的配置属性

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，它写在 list 中。但是什么都没找到……

这是 list 输出:

{
    "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

您可以将所有 list 选项放在 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 对此的回答 issue .
这也不错 Vue PWA Guide .