Vue3 PWA 如何配置
原创
©著作权归作者所有:来自51CTO博客作者十月ooOO的原创作品,请联系作者获取转载授权,否则将追究法律责任
Vue3 PWA 如何配置
一、什么是 PWA
在看如何配置之前需要先知道什么是 PWA
具体参阅: https://www.vuemastery.com/blog/getting-started-with-pwas-and-vue3/ 看完就会了
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中浏览器中打开,并添加到主屏幕的时候,就像下面这样,自动填充上名字和图标