Vue3 PWA 如何配置

Vue3 PWA 如何配置

一、什么是 PWA

在看如何配置之前需要先知道什么是 PWA

具体参阅： https://www.vuemastery.com/blog/getting-started-with-pwas-and-vue3/
看完就会了

pwa 需要网站是在 https 协议下的，不然不管用，像 serviceWorker 什么的都不能用了就。

vue pwa 官方配置说明 https://cli.vuejs.org/core-plugins/pwa.html#configuration

二、Vue3 配置 PWA

我的配置是这样的：

PWA 的配置是在 vue.config.js 中设置的，在 pwa 属性下

/**
   * PWA 设置
   */
  pwa: {
    name: '日记', // 名字
    themeColor: "#373737", // 背景颜色
    appleMobileWebAppCapable: true, // 苹果WebApp支持

    // manifest 设置
    manifestOptions: {
      name: '标题日记',
      short_name: "日记",
      theme_color: "#373737",
      start_url: ".",
      display: "standalone",
      background_color: "#000000"
    },

    // 图标
    iconPaths: {
      faviconSVG: 'src/assets/img/logo.svg',
      favicon32: 'src/assets/img/favicon.png',
      favicon16: 'src/assets/img/favicon.png',
      appleTouchIcon: 'src/assets/img/appicon-apple.png',
      maskIcon: '',
      msTileImage: ''
    }
  }

在iOS中浏览器中打开，并添加到主屏幕的时候，就像下面这样，自动填充上名字和图标