sea-warning-web/vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import topLevelAwait from 'vite-plugin-top-level-await'
import { resolve } from 'path'
import viteCompression from 'vite-plugin-compression';//Gzip
import { visualizer } from "rollup-plugin-visualizer";
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // 【svg-icons相关】
import VitePluginHtmlEnv from 'vite-plugin-html-env'
import postcsspxtoviewport from 'postcss-px-to-viewport'

const time = new Date().getTime()
export default defineConfig({
  define: {
    'process.env': process.env
  },
  plugins: [
    vue(),
    viteCompression(),
    VitePluginHtmlEnv(),
    visualizer(),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
      // svgoOptions: {
      //   plugins: [
      //     {
      //       name: 'removeAttrs',
      //       params: {
      //         attrs: ['class', 'data-name', 'fill', 'stroke']
      //       }
      //     }
      //   ]
      // }
    }),

    topLevelAwait({
      promiseExportName: '__tla',
      promiseImportName: i => `__tla_${i}`
    })
  ],
  base: '/sww/',
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  server: {
    port: 6699,
    host: '0.0.0.0',
    open: true,
    strictPort: false,
    proxy: {
      '/sww-api': {
        target: 'http://192.168.242.21:9099/',
        changeOrigin: true,
        rewrite: (path) => {
          return path.replace(/^\/sww-api/, '')
          // return path
        }
      },
      '/ws-api': {
        // target: 'ws://8.130.72.63:18073/',
        target: 'ws://192.168.242.21:9099/',
        ws: true,
        changeOrigin: true,
        rewrite: path => {
          return path.replace(/^\/ws-api/, '')
        }
      },
      '/EzServer6-api': {
        target: 'http://74.10.28.116:8090/',	// 地图底图代理
        changeOrigin: true,
        rewrite: path => {
          return path
        }
      },
      '/geoserver-api': {
        target: 'http://192.168.242.21:9090/',	// 地图服务代理
        changeOrigin: true,
        rewrite: path => {
          return path.replace(/^\/geoserver-api/, '')
        }
      },
      '/rh-ws-api': {
        target: 'http://74.10.28.28:6990/', // fk
        ws: true,
        changeOrigin: true,
        rewrite: path => {
          return path.replace(/^\/rh-ws-api/, '')
        }
      },
      '/history-track-ws-api': {
        target: 'http://74.10.28.24:9999/', // fk
        ws: true,
        changeOrigin: true,
        rewrite: path => {
          return path.replace(/^\/history-track-ws-api/, '')
        }
      },
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        api: "modern-compiler" // or 'modern'
      }
    },
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px',
          viewportWidth: 1920,
          unitPrecision: 5, // 单位转换后保留的精度
          propList: ['*'], // 能转化为vw的属性列表
          viewportUnit: 'vw', // 希望使用的视口单位
          fontViewportUnit: 'vw', // 字体使用的视口单位
          selectorBlackList: ['ignore-'], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
          minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
          mediaQuery: true, // 媒体查询里的单位是否需要转换单位
          replace: true, //  是否直接更换属性值，而不添加备用属性
          exclude: [], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
          include: [], // 如果设置了include，那将只有匹配到的文件才会被转换
          landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
          landscapeUnit: 'vw', // 横屏时使用的单位
          landscapeWidth: 1628, // 横屏时使用的视口宽度
        }),
      ]
    }
  },
  build: {
    outDir: "sea-warning-web",
    rollupOptions: {//分包优化
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return time + id.toString().split('node_modules/')[1].split('/')[0].toString();
          } else {
            return time + id.toString();
          }
        }
      }
    }
  },
  publicDir: 'src/out',
  optimizeDeps: {
    include: []
  }
} as any)