classroom-instruments/vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';

import Components from 'unplugin-vue-components/vite';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
// import viteESLint from 'vite-plugin-eslint';
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中相同
  remUnit: 16
});
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');

function resolve(dir: string) {
  return path.join(__dirname, dir);
}
// https://vitejs.dev/config/
// https://github.com/vitejs/vite/issues/1930 .env
const proxyUrl = 'https://dev.kt.colexiu.com/';
// const proxyUrl = 'https://test.kt.colexiu.com';
// const proxyUrl = 'http://192.168.3.14:7989';
const now = new Date().getTime();
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({
        injectRegister: 'auto',
        registerType: 'autoUpdate',
        includeAssets: ['./logo.png'],
        workbox: {
          skipWaiting: true,
          clientsClaim: true,
          runtimeCaching: []
          // 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: 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
        }
      }),
      versionUpdatePlugin({
        version: now
      })
    ],
    define: {
      // 定义全局变量
      __APP_VERSION__: now
    },
    build: {
      target: 'es2015',
      rollupOptions: {
        output: {
          entryFileNames: `[name]-[hash]-${now}.js`,
          chunkFileNames: `[name]-[hash]-${now}.js`,
          assetFileNames: `[name]-[hash].[ext]`
        }
      }
    },
    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
        }
      }
    }
  };
});