I had a trouble with my site, I am using vue3 and amplify to deploy my site. My problem is when I deploy to new code, when deploying is finish and I visit my site again, my screen show blank white screen without any content, I need reload some times or need clear cache storage to get new content. It makes me tired
This is my config for vite-pwa

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
import { resolve } from 'path'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ['ion-icon'].includes(tag),
        }
      }
    }),
    VitePWA({
      base: '/',
      includeAssets: ['img/**/*.*', 'fonts/**/*.*'],
      useCredentials: true,
      manifest: {
        name: 'My App',
        short_name: 'App',
        start_url: '/',
        display: 'standalone',
        background_color: '#fff',
        theme_color: '#fff'
      }
    })
  ],
  server: {
    port: 5000,
    host: '0.0.0.0',
    hmr: {
      host: 'localhost',
      port: 5000
    }
  },
  build: {
    chunkSizeWarningLimit: 100,
    manifest: true
  },
  resolve: {
    alias: {
      '~': resolve(__dirname, 'src')
    }
  }
})

This is my config for build on amplify

version: 1
applications:
  - appRoot: client
    frontend:
      phases:
        preBuild:
          commands:
            - npm install
            - npm ci
        build:
          commands:
            - npm run build
      artifacts:
        baseDirectory: dist
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*

This is my screen when I try visit site