import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import eslint from 'vite-plugin-eslint';
import { createHtmlPlugin } from 'vite-plugin-html';
import path from 'path';
import { visualizer } from 'rollup-plugin-visualizer';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, path.join(__dirname, './configs/env'));

  const loadProxyServer = (url: string, enable?: boolean) => {
    if (!enable) {
      return {};
    }

    return {
      server: {
        proxy: {
          // 选项写法
          '/api': {
            target: url,
            changeOrigin: true,
            rewrite: serverPath => serverPath.replace(/^\/api/, '')
          }
        }
      }
    };
  };

  return {
    base: env.VITE_APP_BASE_URL,
    plugins: [
      vue(),
      vueJsx(),
      eslint(),
      // 参数模板化 index.html
      createHtmlPlugin({
        inject: {
          data: {
            title: env.VITE_APP_NAME || 'GCI中后台管理系统',
            seoScript: `  <meta name="description" content="${env.VITE_APP_DESCRIPTION}" />
          <meta name="keywords"
            content="${env.VITE_APP_SEO_KEYWORDS}" />`,
            gciPlayer: `<script src="${env.VITE_APP_RESOURCE_URL}/gciplay.monitor.js?v=1"></script>
            <script src="${env.VITE_APP_RESOURCE_URL}/gciplay.js?v=1"></script>
            `
          }
        }
      }),
      visualizer({ open: true })
    ],
    envDir: './configs/env',
    envPrefix: ['GCI_', 'VITE_'],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    build: {
      sourcemap: true,
      commonjsOptions: {
        transformMixedEsModules: true
      }
    },
    ...loadProxyServer(env.VITE_APP_API_URL, env.VITE_APP_PROXY === 'OPEN')
  };
});