VueJS webpack PWA 资产图标 manifest.json [英] VueJS webpack PWA assets icons manifest.json

问题描述

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

I configured my PWA manifest.json in vue.config.js, shown below. How can I configure the PWA icons to refer to the images inside the 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"
            }
          ]
        }
    }
}

当我运行我的应用程序时，出现此错误:

When I run my app, I get this error :

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

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

I don't understand why /src is set in the URL.

推荐答案

使用 来自public 目录 的静态资产(例如，public/img/company/logo-192x192.png 和public/img/company/logo-512x512.png)，按原样复制到构建输出.然后你的 vue.config.js 会像这样引用它们:

Use static assets from the public directory (e.g., public/img/company/logo-192x192.png and public/img/company/logo-512x512.png), which are copied as-is to the build output. Then your vue.config.js would reference them like this:

// 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"
        }
      ]
    }
  }
}

这篇关于VueJS webpack PWA 资产图标 manifest.json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！