VueJS webpack PWA 资产图标 manifest.json

Question

我在vue.config.js 中配置了我的 PWA manifest.json，如下所示。如何配置 PWA 图标以引用 assets/ 文件夹中的图像？

module.exports = {
    pwa: {
        manifestOptions: {
          name: process.env.VUE_APP_APP_NAME,
          short_name: process.env.VUE_APP_SHORT_NAME,
          start_url: process.env.VUE_APP_START_URL,
          display: 'standalone',
          theme_color: process.env.VUE_APP_PRIMARY_COLOR,
          background_color: process.env.VUE_APP_BACKGROUND_COLOR,
          icons: [
            {
              src: `src/assets/${process.env.VUE_APP_COMPANY}/logo-192x192.png`,
              sizes: "192x192",
              type: "image/png"
            },
            {
              src: `src/assets/${process.env.VUE_APP_COMPANY}/logo-512x512.png`,
              sizes: "512x512",
              type: "image/png"
            }
          ]
        }
    }
}

当我运行我的应用程序时，我收到了这个错误：

http://localhost:8080/src/assets/company/logo-512x512.png (Download error or resource isn't a valid image)

我不明白为什么在 URL 中设置了/src。

Answer 1

使用 static assets from the public directory（例如，public/img/company/logo-192x192.png 和 public/img/company/logo-512x512.png），它们按原样复制到构建输出。然后你的vue.config.js 会像这样引用它们：

// vue.config.js
module.exports = {
  pwa: {
    manifestOptions: {
      icons: [
        {
          src: `/img/${process.env.VUE_APP_COMPANY}/logo-192x192.png`,
          sizes: "192x192",
          type: "image/png"
        },
        {
          src: `/img/${process.env.VUE_APP_COMPANY}/logo-512x512.png`,
          sizes: "512x512",
          type: "image/png"
        }
      ]
    }
  }
}