为博客增加 PWA 支持
安装
首先需要安装 @vite-pwa/vitepress 插件
sh
npm i -D @vite-pwa/vitepresssh
pnpm add -D @vite-pwa/vitepresssh
yarn add -D @vite-pwa/vitepress配置
-> .vitepress/config.ts
ts
import { defineConfig } from 'vitepress'
import { withPwa } from '@vite-pwa/vitepress'
export default withPwa(
defineConfig({
//...
pwa: {},
}),
)然后在插槽中注入组件
-> .vitepress/theme/index.ts
ts
import { h } from 'vue'
import Theme from 'vitepress/theme'
import RegisterSW from './components/RegisterSW.vue'
export default {
...Theme,
Layout() {
return h(Theme.Layout!, null, {
'footer-after': () => h(RegisterSW),
})
},
}更多细节参考 @vite-pwa/vitepress 文档