feat: support some configurations through the .env file

apps/web-antd/.env.analyze

@@ -4,3 +4,5 @@ VITE_PUBLIC_PATH = /
 
 # Basic interface address SPA
 VITE_GLOB_API_URL=/api
+
+VITE_VISUALIZER = true

apps/web-antd/.env.production

@@ -2,4 +2,8 @@
 VITE_PUBLIC_PATH = /
 
 # Basic interface address SPA
-VITE_GLOB_API_URL=https://mock-napi.vben.pro/api
+VITE_GLOB_API_URL = https://mock-napi.vben.pro/api
+
+VITE_COMPRESS = gzip
+
+VITE_PWA = false

apps/web-antd/package.json

@@ -17,6 +17,7 @@
   "type": "module",
   "scripts": {
     "build": "pnpm vite build",
+    "build:analyze": "pnpm vite build --mode analyze",
     "dev": "pnpm vite",
     "preview": "vite preview",
     "typecheck": "vue-tsc --noEmit --skipLibCheck"

apps/web-antd/vite.config.mts

@@ -1,10 +1,11 @@
-import { defineConfig } from '@vben/vite-config';
+import { defineConfig, loadAndConvertEnv } from '@vben/vite-config';
 
 export default defineConfig({
-  application: ({ mode }) => {
+  application: async ({ mode }) => {
+    const envConfig = await loadAndConvertEnv();
+
     return {
-      compress: false,
-      compressTypes: ['brotli', 'gzip'] as const,
+      ...envConfig,
       importmap: false,
       importmapOptions: {
         // 通过 Importmap CDN 方式引入,
@@ -40,7 +41,6 @@ export default defineConfig({
           short_name: `Vben Admin Pro ${mode}`,
         },
       },
-      visualizer: false,
     };
   },
   vite: {

internal/vite-config/src/config/application.ts

@@ -31,7 +31,7 @@ function defineApplicationConfig(options: DefineApplicationOptions = {}) {
       pwa: true,
       turboConsole: false,
       ...(typeof application === 'function'
-        ? application(config)
+        ? await application(config)
         : application),
     });
 
@@ -71,7 +71,7 @@ function defineApplicationConfig(options: DefineApplicationOptions = {}) {
     );
     return mergeConfig(
       mergedConfig,
-      typeof vite === 'function' ? vite(config) : vite,
+      typeof vite === 'function' ? await vite(config) : vite,
     );
   });
 }

internal/vite-config/src/config/library.ts

@@ -22,7 +22,7 @@ function defineLibraryConfig(options: DefineLibraryOptions = {}) {
       injectMetadata: true,
       isBuild,
       mode,
-      ...(typeof library === 'function' ? library(config) : library),
+      ...(typeof library === 'function' ? await library(config) : library),
     });
 
     const { dependencies = {}, peerDependencies = {} } =
@@ -54,7 +54,7 @@ function defineLibraryConfig(options: DefineLibraryOptions = {}) {
     const mergedConfig = mergeConfig(commonConfig, packageConfig);
     return mergeConfig(
       mergedConfig,
-      typeof vite === 'function' ? vite(config) : vite,
+      typeof vite === 'function' ? await vite(config) : vite,
     );
   });
 }

internal/vite-config/src/index.ts

@@ -1,2 +1,3 @@
 export * from './config';
 export * from './plugins';
+export { loadAndConvertEnv } from './utils/env';

internal/vite-config/src/plugins/extra-app-config.ts

@@ -6,7 +6,7 @@ import {
   readPackageJSON,
 } from '@vben/node-utils';
 
-import { getEnvConfig } from '../utils/env';
+import { loadEnv } from '../utils/env';
 
 interface PluginOptions {
   isBuild: boolean;
@@ -73,7 +73,7 @@ async function viteExtraAppConfigPlugin({
 }
 
 async function getConfigSource() {
-  const config = await getEnvConfig();
+  const config = await loadEnv();
   const windowVariable = `window.${VBEN_ADMIN_PRO_APP_CONF}`;
   // 确保变量不会被修改
   let source = `${windowVariable}=${JSON.stringify(config)};`;

internal/vite-config/src/typing.ts

@@ -42,7 +42,7 @@ interface CommonPluginOptions {
   devtools?: boolean;
   /** 环境变量 */
   env?: Record<string, any>;
-  /** 是否开启注入metadata */
+  /** 是否注入metadata */
   injectMetadata?: boolean;
   /** 是否构建模式 */
   isBuild?: boolean;
@@ -93,14 +93,14 @@ interface LibraryOptions extends LibraryPluginOptions {}
 
 interface DefineApplicationOptions {
   application?:
-    | ((config: ConfigEnv) => ApplicationOptions)
+    | ((config: ConfigEnv) => Promise<ApplicationOptions>)
     | ApplicationOptions;
-  vite?: ((config: ConfigEnv) => UserConfig) | UserConfig;
+  vite?: ((config: ConfigEnv) => Promise<UserConfig>) | UserConfig;
 }
 
 interface DefineLibraryOptions {
-  library?: ((config: ConfigEnv) => LibraryOptions) | LibraryOptions;
-  vite?: ((config: ConfigEnv) => UserConfig) | UserConfig;
+  library?: ((config: ConfigEnv) => Promise<LibraryOptions>) | LibraryOptions;
+  vite?: ((config: ConfigEnv) => Promise<UserConfig>) | UserConfig;
 }
 
 type DefineConfig = {

internal/vite-config/src/utils/env.ts

@@ -1,3 +1,5 @@
+import type { ApplicationPluginOptions } from '../typing';
+
 import { join } from 'node:path';
 
 import { fs } from '@vben/node-utils';
@@ -23,7 +25,7 @@ function getConfFiles() {
  * @param match prefix
  * @param confFiles ext
  */
-export async function getEnvConfig(
+async function loadEnv<T = Record<string, string>>(
   match = 'VITE_GLOB_',
   confFiles = getConfFiles(),
 ) {
@@ -46,5 +48,26 @@ export async function getEnvConfig(
       Reflect.deleteProperty(envConfig, key);
     }
   });
-  return envConfig;
+  return envConfig as T;
 }
+
+async function loadAndConvertEnv(
+  match = 'VITE_',
+  confFiles = getConfFiles(),
+): Promise<Partial<ApplicationPluginOptions>> {
+  const envConfig = await loadEnv(match, confFiles);
+  const visualizer = envConfig.visualizer || '';
+  const pwa = envConfig.pwa || '';
+  const compress = envConfig.VITE_COMPRESS || '';
+  const compressTypes = compress
+    .split(',')
+    .filter((item) => ['brotli', 'gzip'].includes(item));
+  return {
+    compress: !!compress,
+    compressTypes: compressTypes as ('brotli' | 'gzip')[],
+    pwa: !!pwa,
+    visualizer: !!visualizer,
+  };
+}
+
+export { loadAndConvertEnv, loadEnv };