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

Posted 2023-03-07

【中文标题】Vue PWA 插件 - 清单不使用我的配置属性

【英文标题】：Vue PWA Plugin - Manifest doesn't use my config attributes

【发布时间】：2020-10-03 23:30:09

【问题描述】：

这很奇怪。我安装了 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 中的任何设置（除了名称，但这必须由另一个设置使用，因为它不会改变，如果我改变它）

我问自己，主题颜色在哪里，所以我在洞应用程序文件夹中搜索了 hexcode #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"

【参考方案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。

【参考方案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”？对我来说没有任何意义......

对不起，我编辑了我的答案，看来你是通过package.json配置pwa插件所以，你必须把pwa的配置放在vue属性里面。

嗯，是的，它在 vue 道具里面。但不起作用....

你能确定你安装了@vue/cli-plugin-pwa和register-service-worker。你的npm run build有什么错误吗？

是的，安装它！它也在 package.json 中注册并且没有构建错误... :(