Vue3 PWA 如何配置

十月ooOO

已于 2023-01-30 10:03:07 修改

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： # Vue3 文章标签： vue.js javascript 前端

于 2022-09-07 17:43:03 首次发布

本文链接：https://blog.csdn.net/KimBing/article/details/126750683

Vue3 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了什么是PWA，并详细展示了如何在Vue3项目中配置PWA，包括设置manifest、图标以及在iOS设备上的表现。通过配置vue.config.js文件，可以实现自定义应用名称、主题色以及图标等，使应用具备更好的离线和桌面应用体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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: ''
    }
  }