第六十章-Vite插件-vite-plugin-pwa

1.说明

• vite-plugin-pwa的npm首页：PWA一些技术集成。

• Service Worker-参考链接

• PWA-MDN说明

• B站-PWA黑马公开课教学

如果你还不清楚PWA是什么也没关系。直接配置即可。不影响应用在网页端的运行。

2.安装

yarn add vite-plugin-pwa --dev

3.配置插件

build\vite\plugin\pwa.ts：

/**
 * Zero-config PWA for Vite
 * https://github.com/antfu/vite-plugin-pwa
 */
import type { ViteEnv } from '../../utils';

import { VitePWA } from 'vite-plugin-pwa';

export function configPwaConfig(env: ViteEnv) {
  const { VITE_USE_PWA, VITE_GLOB_APP_TITLE, VITE_GLOB_APP_SHORT_NAME } = env;

  if (VITE_USE_PWA) {
    // vite-plugin-pwa
    const pwaPlugin = VitePWA({
      manifest: {
        name: VITE_GLOB_APP_TITLE,
        short_name: VITE_GLOB_APP_SHORT_NAME,
        icons: [
          {
            // ./表示public文件夹
            src: './resource/img/pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: './resource/img/pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
        ],
      },
    });
    return pwaPlugin;
  }
  return [];
}

4.配置Vite

build\vite\plugin\index.ts：

// ...
import { configPwaConfig } from './pwa';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  // The following plugins only work in the production environment
  if (isBuild) {
    // ...
    // vite-plugin-pwa
    vitePlugins.push(configPwaConfig(viteEnv));
  }

  return vitePlugins;
}

上一章

第五十九章-Vite插件-vite-plugin-compression

下一章

第六十一章-Vite配置-optimizeDeps.include