vue3发布版本后提示

发布版本后更新提示，有很多种方式，我这里使用比较简单的一种方式，PWA

在vite.config.js中添加以下代码

import { VitePWA } from 'vite-plugin-pwa'

// plugins中添加以下代码
VitePWA({
  registerType: 'prompt',
  devOptions: {
    enabled: false
    /* other options */
  },
  workbox: {
    globPatterns: ['**/*.{js,css,html,ico,png,svg}']
  },
  manifest: {
    name: '中后台管理系统',
    short_name: 'back',
    description: '中后台管理系统的PWA版本',
    icons: [{ src: 'icon/path_512x512.png', sizes'512x512', type: 'image/png' }],
    display: 'standalone',
    theme_color: '#9EBC95',
    background_color: '#9EBC95',
    orientation: 'portrait',
    start_url: '/',
    scope: '/'
  }
})

App.vue中添加组件

vue

<template>
    <el-watermark :font="font" :content="content" style="min-height: 100vh">
      <router-view />
    </el-watermark>
  <ReloadPrompt />
</template>

<script setup>
import ReloadPrompt from '@/components/ReloadPrompt/index.vue'
</script>

ReloadPrompt/index.vue

vue

<template>
  <transition name="notification">
    <div class="notification" v-if="needRefresh">
      <div class="title">
        <span>通知</span>
      </div>
      <div class="text">xxx软件有新版本可用,请点击重新加载按钮进行更新</div>
      <div class="btns">
        <el-button type="success" @click="updateServiceWorker">重新加载</el-button>
        <el-button type="info" @click="close">关闭</el-button>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { useRegisterSW } from 'virtual:pwa-register/vue'
const intervalMS = 5 * 60 * 1000
const {
  offlineReady,
  needRefresh,
  updateServiceWorker,
} = useRegisterSW({
  onRegistered(r) {
    r && setInterval(() => {
      r.update()
    }, intervalMS)
  }
})

const close = async () => {
  offlineReady.value = false
  needRefresh.value = false
}
</script>

<style scoped lang="scss">
.notification {
  position: fixed;
  bottom: 20px;
  /* 距离底部的距离 */
  right: 20px;
  /* 距离右侧的距离 */
  background-color: #fff;
  border: 1px solid #ccc;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding: 10px;
  z-index: 9999;
}
.title {
  span {
    color: #000;
    font-size: 16px;
    font-weight: bold;
  }
}
.text {
  margin: 10px 0px;
  color: #333;
  font-size: 16px;
}
.btns {
  display: flex;
  justify-content: flex-end;
}

.notification p {
  font-weight: bold;
  margin: 0 0 5px;
}

.notification button {
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.notification-enter-active,
.notification-leave-active {
  transition: all 0.5s ease;
}

.notification-enter-from,
.notification-leave-to {
  transform: translateX(100%);
}</style>

要使用https 协议或者localhost 进行测试

vue3发布版本后提示 ​

vue3发布版本后提示