web/vite.config.js

import { defineConfig, loadEnv } from 'vite';
import {
  getRootPath,
  getSrcPath,
  viteDefine,
  setupVitePlugins,
  createViteProxy,
} from './build';
import { getEnvConfig } from './.env-config.js';
// yarn add --dev @esbuild-plugins/node-globals-polyfill
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
// yarn add --dev @esbuild-plugins/node-modules-polyfill
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill';
// You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfill
import rollupNodePolyFill from 'rollup-plugin-node-polyfills';

export default defineConfig((configEnv) => {
  const viteEnv = loadEnv(configEnv.mode, process.cwd());
  console.log('viteEnv:', viteEnv);

  const processEnvValues = {
    'process.env': Object.entries(viteEnv).reduce((prev, [key, val]) => {
      return {
        ...prev,
        [key]: val,
      };
    }, {}),
  };

  const rootPath = getRootPath();
  const srcPath = getSrcPath();

  const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'Y';
  const envConfig = getEnvConfig(viteEnv);

  return {
    base: viteEnv.VITE_BASE_URL,
    resolve: {
      alias: {
        '~': rootPath,
        '@': srcPath,
        'qs': 'rollup-plugin-node-polyfills/polyfills/qs',
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },

    define: { ...viteDefine, ...processEnvValues },
    plugins: [
      ...setupVitePlugins(viteEnv),
      NodeModulesPolyfillPlugin(),
      NodeGlobalsPolyfillPlugin({
        process: true,
        buffer: true,
      }),
    ],
    server: {
      host: '0.0.0.0',
      port: 8888,
      open: true,
      proxy: createViteProxy(isOpenProxy, envConfig),
    },
    preview: {
      port: 5050,
    },
    build: {
      reportCompressedSize: false,
      sourcemap: false,
      commonjsOptions: {
        ignoreTryCatch: false,
      },
      // target: ['chrome52'],
      // cssTarget: ['chrome52'],
      // rollupOptions: {
      //   plugins: [rollupNodePolyFill()],
      // },
    },
  };
});