Vue PWA 资源生成器

简述：

npx vue-pwa-asset-generator -a {512x512_png源文件 | svg源文件} [-o {输出文件夹} [-b {备用背景颜色}]]

这个包为你创建了所有在使用PWA插件的VueJS应用中默认使用的资源，以及一个设置了icons属性的manifest JSON文件。

安装

你可以像上面展示的那样使用npx，或者你可以全局安装它：

npm install --global vue-pwa-asset-generator

或者

yarn global add vue-pwa-asset-generator

或者

pnpm global add vue-pwa-asset-generator

使用方法

VueJS PWA 资源生成器有一个vue-asset-generate命令，带有两个参数：

-a：输入资源，可以是SVG文件或PNG文件（最大图像为512x512的png图像）。
-o：输出文件夹（如果不存在则创建）。此参数是可选的，默认情况下，vue-pwa-asset-generator会假设命令在VueJS项目中运行。因此manifest.json和favicon.ico在public文件夹中，其余的在public/img/icons文件夹中。
-b：ico图像的备用背景颜色。
--no-manifest：不生成manifest.json文件的选项。

示例

vue-asset-generate -a logo.png -o img
vue-asset-generate -a logo.svg
vue-asset-generate -a logo.svg -o img
vue-asset-generate -a logo.svg -o img -b 182C61
vue-asset-generate -a logo.svg -o img -b "#9AECDB"

"嘿，我正在使用Vue的pwa插件。我应该把manifest json放在哪里？"

你可以在vue.config.js文件中配置你的PWA。

这里有一个如何合并创建的manifest.json和你的配置文件的例子：

module.exports = {
  // ... 其他配置
  pwa: {
    themeColor: "#130f40",
    msTileColor: "#130f40",
    name: "我的应用",
    manifestOptions: {
      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",
        },
        {
          src: "./img/icons/apple-touch-icon-60x60.png",
          sizes: "60x60",
          type: "image/png",
        },
        {
          src: "./img/icons/apple-touch-icon-76x76.png",
          sizes: "76x76",
          type: "image/png",
        },
        {
          src: "./img/icons/apple-touch-icon-120x120.png",
          sizes: "120x120",
          type: "image/png",
        },
        {
          src: "./img/icons/apple-touch-icon-152x152.png",
          sizes: "152x152",
          type: "image/png",
        },
        {
          src: "./img/icons/apple-touch-icon-180x180.png",
          sizes: "180x180",
          type: "image/png",
        },
        {
          src: "./img/icons/apple-touch-icon.png",
          sizes: "180x180",
          type: "image/png",
        },
        {
          src: "./img/icons/favicon-16x16.png",
          sizes: "16x16",
          type: "image/png",
        },
        {
          src: "./img/icons/favicon-32x32.png",
          sizes: "32x32",
          type: "image/png",
        },
        {
          src: "./img/icons/msapplication-icon-144x144.png",
          sizes: "144x144",
          type: "image/png",
        },
        {
          src: "./img/icons/mstile-150x150.png",
          sizes: "150x150",
          type: "image/png",
        },
      ],
    },
  },
};