prims-web/vite.config.js

import { defineConfig,loadEnv } from 'vite';
import react from '@vitejs/plugin-react-swc';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';

import viteCompression from 'vite-plugin-compression';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig(({mode})=> {
  const env = loadEnv(mode, process.cwd(), '');
  // 如果你用的ts，请使用 let define: { [key: string]: string } = {};
  let define = {};
  Object.keys(env).forEach(key => {
    define[`import.meta.env.${key}`] = JSON.stringify(env[key])
  })
  return {
    base: './',
    plugins: [
      react(),
      {
        name: 'less',
        apply: 'build',
        loaders: ['less-loader']
      },
      monacoEditorPlugin({
        languageWorkers: ['editorWorkerService']
      }),
      visualizer({
        open:true, // 注意这里要设置为true，否则无效，如果存在本地服务端口，将在打包后自动展示
        gzipSize:true,
        file: "stats.html", //分析图生成的文件名
        brotliSize:true
      }),
      viteCompression({
        filter: /\.(js|css|json|txt|ico|svg)(\?.*)?$/i,
        verbose: true, // 是否在控制台中输出压缩结果
        disable: false,
        threshold: 1024, // 如果体积大于500kb，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
        algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
        ext: '.gz',
        deleteOriginFile: false // 源文件压缩后是否删除
      })
    ],
    build: {
      outDir: 'dist', // 打包文件 默认dist
      minify: 'terser',
      chunkSizeWarningLimit: 2000, // 文件大小，默认500kb，生成的一个或多个文件的大小超过该值时，Vite 会发出警告提示
      // 打包清除console和debugger
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      },
    },
    server: {
      host: '0.0.0.0',// 监听所有地址
      port: 5173, // 默认端口
      https: false, // 是否开启 https
      open: false, // 项目启动时是否打开浏览器
      cors: true, // 为开发服务器配置 CORS。默认启用并允许任何源，传递一个 选项对象 来调整行为或设为 false 表示禁用。
      base: '/', // 用于代理 Vite 作为子文件夹时使用。
      headers: {}, // 指定服务端响应的headers信息
      strictPort: false, // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口。
      proxy: {
        // 当有 /api开头的地址是，代理到target地址
        '^/api': {
          target: 'http://172.20.2.23:18084/', //目标源，目标服务器，真实请求地址
          //target: 'http://192.168.2.211:9080/', //目标源，目标服务器，真实请求地址
          changeOrigin: true, //支持跨域
          rewrite: (path) => path.replace(/^\/api/, "/api"), //重写真实路径,替换/api
        }
      },
    },
  }
})