Question

我已经附加了2个屏幕截图，其中一个是我的vue.config.js，另一个是我的构建正在生成的未缩小输出的一部分。

这是怎么回事：我想更改图标路径和清单的路径。不管出于什么原因，改变这种状况的官方方法都行不通。现在它们是空格，但是在其他任何情况下都无法正常工作（在我输入此字符以进行三重检查时，仅尝试使用“ foo / bar”作为路径）。

我很困惑，因为根据官方文档，我似乎在做应有的事情。有什么其他的眼睛可以发现我失踪的吗？

Answer 1

问候 埃里克·怀特

在某些时候，我遇到了相同的困难，并按以下步骤解决了它：

将图像复制到“公开” 文件夹

示例： 我们将文件夹“收藏夹” 添加到“公开” ，“收藏夹” 包含5张图片

[project]/public/favicon/favicon-32x32.png
[project]/public/favicon/favicon-16x16.png
[project]/public/favicon/apple-touch-icon-152x152.png
[project]/public/favicon/safari-pinned-tab.svg
[project]/public/favicon/msapplication-icon-144x144.png

要在html中添加图像：修改“ vue.config.js” 并添加。

// Inside vue.config.js
module.exports = {
  // ... other vue-cli plugin options ...
  pwa: {
  // ...
    iconPaths: {
      favicon32: 'favicon/favicon-32x32.png',
      favicon16: 'favicon/favicon-16x16.png',
      appleTouchIcon: 'favicon/apple-touch-icon-152x152.png',
      maskIcon: 'favicon/safari-pinned-tab.svg',
      msTileImage: 'favicon/msapplication-icon-144x144.png'
    }
  // ...
  }
}

要更改“ manifest.json” 的路径和名称，请修改“ vue.config.js” 并添加：

// Inside vue.config.js
module.exports = {
  // ... other vue-cli plugin options ...
  pwa: {
  // ...
    manifestPath: 'my_new_manifest.json',
  // ...
  }
}

要更改“ manifest.json” 的属性（名称，图像，颜色等），请修改“ vue.config.js” 并添加：

// Inside vue.config.js
module.exports = {
  // ... other vue-cli plugin options ...
  pwa: {
    // ...
    manifestOptions: {
      name: 'etc ..',
      short_name: 'etc ..',
      theme_color: '# f44647',
      background_color: '# f44647',
      start_url: 'index.html',
      display: 'standalone',
      orientation: 'portrait',
      icons: [
        {
          src: './favicon/favicon-32x32.png',
          sizes: '32x32',
          type: 'image/png'
        },
        {
          src: './favicon/favicon-16x16.png',
          sizes: '16x16',
          type: 'image/png'
        },
        {
          src: './favicon/apple-touch-icon-152x152.png',
          sizes: '152x152',
          type: 'image/png'
        },
        {
          src: './favicon/safari-pinned-tab.svg',
          sizes: '942x942',
          type: 'image/svg+xml'
        },
        {
          src: './favicon/msapplication-icon-144x144.png',
          sizes: '144x144',
          type: 'image/png'
        },
      ]
    },
    // ...
  }
}

注意

夹头不是受支持的参数。
excludeChucks 不是受支持的参数。
如果需要在本地测试服务工作者，请构建应用程序，然后从构建目录运行简单的HTTP服务器。建议使用浏览器隐身窗口以避免浏览器缓存复杂化。
请记住查看 VUE文档，它非常详细，我在@vue/cli-plugin-pwa下面为您提供了一个链接

Answer 2

没关系，通过更新我的依赖关系来解决。

猜测此错误已在我未捕获的补丁中修复

Vue PWA插件调整iconPaths和清单目的地

2 个答案:

注意