VueJS webpack PWA 资产图标 manifest.json

我配置了我的 PWAmanifest.json in vue.config.js，如下所示。如何配置 PWA 图标以引用内部的图像assets/ folder?

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)

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

Use 静态资产来自public目录 https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder (e.g., public/img/company/logo-192x192.png and 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"
        }
      ]
    }
  }
}