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';

// 配置基本大小
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.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: {
        // globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
        runtimeCaching: [
          {
            urlPattern: /classroom/i, // 接口缓存 此处填你想缓存的接口正则匹配
            handler: 'NetworkFirst',
            options: {
              cacheName: 'interface-cache'
            }
          },
          {
            urlPattern: /(.*?)\.(js|css|ts)/, // js /css /ts静态资源缓存
            handler: 'NetworkFirst',
            options: {
              cacheName: 'js-css-cache'
            }
          },
          {
            urlPattern: /(.*?)\.(png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/, // 图片缓存
            handler: 'NetworkFirst',
            options: {
              cacheName: 'image-cache'
            }
          }
        ]
      },
      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
      }
    })
  ],

  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
      }
    }
  }
});