提交 打包试试

1

public/version.json

@@ -0,0 +1 @@
+{"version":1693831119110}

src/App.tsx

@@ -133,6 +133,7 @@ export default defineComponent({
       window.open('https://www.google.cn/intl/zh-CN/chrome/');
     };
 
+
     return () => (
       <>
         <NConfigProvider

src/components/RouterError/index.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'vue-router';
 import downBg from './images/downBg.png'
 import rocketIcon from './images/rocketIcon.png'
 import styles from './index.module.less'
+import axios from 'axios';
 export default defineComponent({
   name: 'router-error',
   setup() {
@@ -91,6 +92,24 @@ export default defineComponent({
     const reloadPage = ()=>{
       window.location.reload();
     }
+
+
+    // 版本监控
+const versionCheck = async () => {
+  if (import.meta.env === 'development') return
+  const response = await axios.get('version.json')
+  // eslint-disable-next-line no-undef
+  const __APP_VERSION__ = localStorage.getItem('versionPage')
+  console.log(__APP_VERSION__,response.data.version,__APP_VERSION__ !== response.data.version)
+  if (__APP_VERSION__ !== response.data.version) {
+    // eslint-disable-next-line no-undef
+    return true
+  }else {
+    return false
+  }
+}
+
+console.log(    versionCheck(),'    versionCheck()')
     return () => <div>
               <NModal v-model:show={showModalMask.value} mask-closable={false}>
           <div class={styles.downMove}>

src/plugins/version.ts

@@ -0,0 +1,38 @@
+// versionUpdatePlugin.js
+import fs from 'fs';
+import path from 'path';
+
+const writeVersion = (versionFile: any, content: any) => {
+  // 写入文件
+  fs.writeFile(versionFile, content, err => {
+    if (err) throw err;
+  });
+};
+
+export default (options: any) => {
+  let config: any;
+
+  return {
+    name: 'version-update',
+    configResolved(resolvedConfig: any) {
+      // 存储最终解析的配置
+      config = resolvedConfig;
+    },
+
+    buildStart() {
+      // 生成版本信息文件路径
+      const file = config.publicDir + path.sep + 'version.json';
+      // 这里使用编译时间作为版本信息
+      const content = JSON.stringify({ version: options.version });
+
+      if (fs.existsSync(config.publicDir)) {
+        writeVersion(file, content);
+      } else {
+        fs.mkdir(config.publicDir, err => {
+          if (err) throw err;
+          writeVersion(file, content);
+        });
+      }
+    }
+  };
+};

vite.config.ts

@@ -9,7 +9,7 @@ import legacyPlugin from '@vitejs/plugin-legacy';
 import { VitePWA } from 'vite-plugin-pwa';
 // 引入等比适配插件
 import px2rem from 'postcss-px2rem';
-
+import versionUpdatePlugin from './src/plugins/version';
 // 配置基本大小
 const postcss = px2rem({
   // 基准大小 baseSize，需要和rem.js中相同
@@ -25,131 +25,141 @@ function resolve(dir: string) {
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://dev.kt.colexiu.com/';
 const proxyUrl = 'https://test.lexiaoya.cn';
-export default defineConfig({
-  base: './',
-  plugins: [
-    vue(),
-    vueJsx(),
-    // viteESLint(),
-    Components({
-      dts: true,
-      resolvers: [NaiveUiResolver()]
-    }),
-    legacyPlugin({
-      targets: ['defaults', 'not IE 11'],
-      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
-      renderLegacyChunks: true,
-      polyfills: [
-        'es.symbol',
-        'es.promise',
-        'es.promise.finally',
-        'es/map',
-        'es/set',
-        'es.array.filter',
-        'es.array.for-each',
-        'es.array.flat-map',
-        'es.object.define-properties',
-        'es.object.define-property',
-        'es.object.get-own-property-descriptor',
-        'es.object.get-own-property-descriptors',
-        'es.object.keys',
-        'es.object.to-string',
-        'web.dom-collections.for-each',
-        'esnext.global-this',
-        'esnext.string.match-all'
-      ]
-    }),
-    VitePWA({
-      registerType: 'autoUpdate',
-      includeAssets: ['./logo.png'],
-      workbox: {
-        skipWaiting: true
-        // runtimeCaching: [
-        //   {
-        //     urlPattern: /(.*?)\.(js|css|ts|tsx|html)/, // js /css /ts静态资源缓存
-        //     handler: 'NetworkOnly',
-        //     options: {
-        //       cacheName: 'js-css-cache'
-        //     }
-        //   },
-        //   {
-        //     urlPattern: /.*\.html.*/,
-        //     handler: 'NetworkOnly',
-        //     options: {
-        //       cacheName: 'wisbayar-html',
-        //       expiration: {
-        //         maxEntries: 20,
-        //         maxAgeSeconds: 30 * 24 * 60 * 60
-        //       },
-        //       cacheableResponse: {
-        //         statuses: [200]
-        //       }
-        //     }
-        //   }
-        // ]
-      },
-      manifest: {
-        name: '酷乐秀-音乐数字课堂',
-        short_name: '音乐数字课堂',
-        theme_color: '#E8EAED',
-        display: 'fullscreen',
-        icons: [
-          {
-            src: './logo.png',
-            sizes: '192x192',
-            type: 'image/png'
-          },
-          {
-            src: './logo.png',
-            sizes: '512x512',
-            type: 'image/png'
-          },
-          {
-            src: './logo.png',
-            sizes: '512x512',
-            type: 'image/png',
-            purpose: 'any maskable'
-          }
-        ],
-        prefer_related_applications: false,
-        related_applications: [
-          {
-            platform: 'webapp',
-            id: '1.0.0',
-            url: './manifest.webmanifest'
-          }
+const now = new Date().getTime();
+localStorage.setItem('versionPage', now + '');
+export default defineConfig(() => {
+  return {
+    base: './',
+    plugins: [
+      vue(),
+      vueJsx(),
+      // viteESLint(),
+      Components({
+        dts: true,
+        resolvers: [NaiveUiResolver()]
+      }),
+      legacyPlugin({
+        targets: ['defaults', 'not IE 11'],
+        additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
+        renderLegacyChunks: true,
+        polyfills: [
+          'es.symbol',
+          'es.promise',
+          'es.promise.finally',
+          'es/map',
+          'es/set',
+          'es.array.filter',
+          'es.array.for-each',
+          'es.array.flat-map',
+          'es.object.define-properties',
+          'es.object.define-property',
+          'es.object.get-own-property-descriptor',
+          'es.object.get-own-property-descriptors',
+          'es.object.keys',
+          'es.object.to-string',
+          'web.dom-collections.for-each',
+          'esnext.global-this',
+          'esnext.string.match-all'
         ]
-      },
+      }),
+      VitePWA({
+        registerType: 'autoUpdate',
+        includeAssets: ['./logo.png'],
+        workbox: {
+          skipWaiting: true
+          // runtimeCaching: [
+          //   {
+          //     urlPattern: /(.*?)\.(js|css|ts|tsx|html)/, // js /css /ts静态资源缓存
+          //     handler: 'NetworkOnly',
+          //     options: {
+          //       cacheName: 'js-css-cache'
+          //     }
+          //   },
+          //   {
+          //     urlPattern: /.*\.html.*/,
+          //     handler: 'NetworkOnly',
+          //     options: {
+          //       cacheName: 'wisbayar-html',
+          //       expiration: {
+          //         maxEntries: 20,
+          //         maxAgeSeconds: 30 * 24 * 60 * 60
+          //       },
+          //       cacheableResponse: {
+          //         statuses: [200]
+          //       }
+          //     }
+          //   }
+          // ]
+        },
+        manifest: {
+          name: '酷乐秀-音乐数字课堂',
+          short_name: '音乐数字课堂',
+          theme_color: '#E8EAED',
+          display: 'fullscreen',
+          icons: [
+            {
+              src: './logo.png',
+              sizes: '192x192',
+              type: 'image/png'
+            },
+            {
+              src: './logo.png',
+              sizes: '512x512',
+              type: 'image/png'
+            },
+            {
+              src: './logo.png',
+              sizes: '512x512',
+              type: 'image/png',
+              purpose: 'any maskable'
+            }
+          ],
+          prefer_related_applications: false,
+          related_applications: [
+            {
+              platform: 'webapp',
+              id: '1.0.0',
+              url: './manifest.webmanifest'
+            }
+          ]
+        },
 
-      devOptions: {
-        enabled: true
+        devOptions: {
+          enabled: true
+        }
+      }),
+      versionUpdatePlugin({
+        version: now
+      })
+    ],
+    define: {
+      // 定义全局变量
+      __APP_VERSION__: now
+    },
+    build: {
+      target: 'es2015'
+    },
+    resolve: {
+      alias: {
+        '@': resolve('./src'),
+        '@common': resolve('./src/common'),
+        '@components': resolve('./src/components'),
+        '@store': resolve('./src/store'),
+        '@views': resolve('./src/views')
       }
-    })
-  ],
-
-  build: {
-    target: 'es2015'
-  },
-  resolve: {
-    alias: {
-      '@': resolve('./src'),
-      '@common': resolve('./src/common'),
-      '@components': resolve('./src/components'),
-      '@store': resolve('./src/store'),
-      '@views': resolve('./src/views')
-    }
-  },
-  server: {
-    host: '0.0.0.0',
-    port: 5002,
-    strictPort: true,
-    cors: true,
-    https: false,
-    proxy: {
-      '/edu-app': {
-        target: proxyUrl,
-        changeOrigin: true
+    },
+    server: {
+      host: '0.0.0.0',
+      port: 5002,
+      strictPort: true,
+      cors: true,
+      https: false,
+      proxy: {
+        '/edu-app': {
+          target: proxyUrl,
+          changeOrigin: true
+        }
       }
     }
-  }
+  };
 });