外观
外观
耶温
399字约1分钟
2024-06-12
提示
PWA只有在 localhost
和 HTTPS
下才回被启用
使用vite命令创建Vue项目
npm init vite@lastet
根据提示按步骤创建 vite + vue项目
完成之后,下载依赖,启动项目。
下载pwa插件
npm install -D vite-plugin-pwa
在vite.config.js
中设置如下:
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
plugins: [
VitePWA({
// 应用清单
manifest: {
name: 'Vite PWA',
short_name: 'Vite',
description: 'Vite PWA APP',
theme_color: '#ccc',
icons: [
{
src: 'logo.png',
sizes: '512x512',
type: 'image/png'
}
]
},
// 注册ws方式
injectRegister: 'auto',
// 设置缓存资源
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg,json,jpg,jpeg}']
},
//dev环境也开启pwa
devOptions: {
enabled: true
}
})
],
})
vite.config.js
完整代码如下:import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
base:'/pwa',
plugins: [
vue(),
VitePWA({
// 应用清单
manifest: {
name: 'Vite PWA',
short_name: 'Vite',
description: 'Vite PWA APP',
theme_color: '#ccc',
icons: [
{
src: 'logo.png',
sizes: '512x512',
type: 'image/png'
}
]
},
// 注册ws方式
injectRegister: 'auto',
// 设置缓存资源
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg,json,jpg,jpeg}']
},
//dev环境也开启pwa
devOptions: {
enabled: true
}
})
],
})