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对issue的答案。

这也是不错的Vue PWA Guide。

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",
    },
  }
}

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

2 个答案: