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",
},
],
},
},
};
⚠️
当从png文件生成资源时,生成器会为safari-pinned-tab.svg
图标创建一个黑白svg,可能需要进行一些手动修改。
我希望这对你像对我一样有用!♥