perf: Refactor vite configuration

vben
1 parent 5e4be0ad
Showing 56 changed files with 645 additions and 456 deletions
.env.analyze
.env.development
.env.production
.env.test
apps/portal-view/.gitkeep
tests/server/README.md → apps/test-server/README.md
tests/server/controller/FileController.ts → apps/test-server/controller/FileController.ts
tests/server/controller/UserController.ts → apps/test-server/controller/UserController.ts
tests/server/ecosystem.config.js → apps/test-server/ecosystem.config.js
tests/server/index.ts → apps/test-server/index.ts
tests/server/nodemon.json → apps/test-server/nodemon.json
tests/server/package.json → apps/test-server/package.json
tests/server/routes.ts → apps/test-server/routes.ts
tests/server/service/FileService.ts → apps/test-server/service/FileService.ts
tests/server/service/UserService.ts → apps/test-server/service/UserService.ts
apps/test-server/tsconfig.json
tests/server/utils.ts → apps/test-server/utils.ts
build/config/themeConfig.ts
build/constant.ts
build/generate/icon/index.ts
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# public path
+VITE_PUBLIC_PATH = /
+
+# Whether to enable gzip or brotli compression
+# Optional: gzip | brotli | none
+# If you need multiple forms, you can use `,` to separate
+VITE_BUILD_COMPRESS = 'none'
+
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/basic-api
+
+# File upload address， optional
+# It can be forwarded by nginx or write the actual address directly
+VITE_GLOB_UPLOAD_URL=/upload
+
+# Interface prefix
+VITE_GLOB_API_URL_PREFIX=
+
+VITE_ENABLE_ANALYZE = true
@@ -7,7 +7,6 @@ VITE_PUBLIC_PATH = /
 # Cross-domain proxy, you can configure multiple
 # Please note that no line breaks
 VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]
-# VITE_PROXY=[["/api","https://vvbin.cn/test"]]
 # Basic interface address SPA
 VITE_GLOB_API_URL=/basic-api
@@ -9,8 +9,6 @@ VITE_PUBLIC_PATH = /
 # If you need multiple forms, you can use `,` to separate
 VITE_BUILD_COMPRESS = 'none'
-# Whether to delete origin files when using compress, default false
-VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 # Basic interface address SPA
 VITE_GLOB_API_URL=/basic-api
@@ -10,9 +10,6 @@ VITE_PUBLIC_PATH = /
 # If you need multiple forms, you can use `,` to separate
 VITE_BUILD_COMPRESS = 'none'
-# Whether to delete origin files when using compress, default false
-VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
-
 # Basic interface address SPA
 VITE_GLOB_API_URL=/basic-api
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "license": "MIT",
   "scripts": {
-    "build": "rimraf ./dist && tsup ./index.ts --dts --format cjs,esm  ",
+    "compile": "rimraf ./dist && tsup ./index.ts --dts --format cjs,esm  ",
     "prod": "npx pm2 start ecosystem.config.js --env production",
     "restart": "pm2 restart ecosystem.config.js --env production",
     "start": "nodemon",
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/ts-config/node-server.json",
+  "compilerOptions": {
+    "noImplicitAny": false
+  }
+}
-import { generate } from '@ant-design/colors';
-
-export const primaryColor = '#0960bd';
-
-export const darkMode = 'light';
-
-type Fn = (...arg: any) => any;
-
-type GenerateTheme = 'default' | 'dark';
-
-export interface GenerateColorsParams {
-  mixLighten: Fn;
-  mixDarken: Fn;
-  tinycolor: any;
-  color?: string;
-}
-
-export function generateAntColors(color: string, theme: GenerateTheme = 'default') {
-  return generate(color, {
-    theme,
-  });
-}
-
-export function getThemeColors(color?: string) {
-  const tc = color || primaryColor;
-  const lightColors = generateAntColors(tc);
-  const primary = lightColors[5];
-  const modeColors = generateAntColors(primary, 'dark');
-
-  return [...lightColors, ...modeColors];
-}
-
-export function generateColors({
-  color = primaryColor,
-  mixLighten,
-  mixDarken,
-  tinycolor,
-}: GenerateColorsParams) {
-  const arr = new Array(19).fill(0);
-  const lightens = arr.map((_t, i) => {
-    return mixLighten(color, i / 5);
-  });
-
-  const darkens = arr.map((_t, i) => {
-    return mixDarken(color, i / 5);
-  });
-
-  const alphaColors = arr.map((_t, i) => {
-    return tinycolor(color)
-      .setAlpha(i / 20)
-      .toRgbString();
-  });
-
-  const shortAlphaColors = alphaColors.map((item) => item.replace(/\s/g, '').replace(/0\./g, '.'));
-
-  const tinycolorLightens = arr
-    .map((_t, i) => {
-      return tinycolor(color)
-        .lighten(i * 5)
-        .toHexString();
-    })
-    .filter((item) => item !== '#ffffff');
-
-  const tinycolorDarkens = arr
-    .map((_t, i) => {
-      return tinycolor(color)
-        .darken(i * 5)
-        .toHexString();
-    })
-    .filter((item) => item !== '#000000');
-  return [
-    ...lightens,
-    ...darkens,
-    ...alphaColors,
-    ...shortAlphaColors,
-    ...tinycolorDarkens,
-    ...tinycolorLightens,
-  ].filter((item) => !item.includes('-'));
-}
-/**
- * The name of the configuration file entered in the production environment
- */
-export const GLOB_CONFIG_FILE_NAME = '_app.config.js';
-
-export const OUTPUT_DIR = 'dist';
-import path from 'path';
-import fs from 'fs-extra';
-import inquirer from 'inquirer';
-import colors from 'picocolors';
-import pkg from '../../../package.json';
-
-async function generateIcon() {
-  const dir = path.resolve(process.cwd(), 'node_modules/@iconify/json');
-
-  const raw = await fs.readJSON(path.join(dir, 'collections.json'));
-
-  const collections = Object.entries(raw).map(([id, v]) => ({
-    ...(v as any),
-    id,
-  }));
-
-  const choices = collections.map((item) => ({ key: item.id, value: item.id, name: item.name }));
-
-  inquirer
-    .prompt([
-      {
-        type: 'list',
-        name: 'useType',
-        choices: [
-          { key: 'local', value: 'local', name: 'Local' },
-          { key: 'onLine', value: 'onLine', name: 'OnLine' },
-        ],
-        message: 'How to use icons?',
-      },
-      {
-        type: 'list',
-        name: 'iconSet',
-        choices: choices,
-        message: 'Select the icon set that needs to be generated?',
-      },
-      {
-        type: 'input',
-        name: 'output',
-        message: 'Select the icon set that needs to be generated?',
-        default: 'src/components/Icon/data',
-      },
-    ])
-    .then(async (answers) => {
-      const { iconSet, output, useType } = answers;
-      const outputDir = path.resolve(process.cwd(), output);
-      fs.ensureDir(outputDir);
-      const genCollections = collections.filter((item) => [iconSet].includes(item.id));
-      const prefixSet: string[] = [];
-      for (const info of genCollections) {
-        const data = await fs.readJSON(path.join(dir, 'json', `${info.id}.json`));
-        if (data) {
-          const { prefix } = data;
-          const isLocal = useType === 'local';
-          const icons = Object.keys(data.icons).map(
-            (item) => `${isLocal ? prefix + ':' : ''}${item}`,
-          );
-
-          await fs.writeFileSync(
-            path.join(output, `icons.data.ts`),
-            `export default ${isLocal ? JSON.stringify(icons) : JSON.stringify({ prefix, icons })}`,
-          );
-          prefixSet.push(prefix);
-        }
-      }
-      fs.emptyDir(path.join(process.cwd(), 'node_modules/.vite'));
-      console.log(
-        `✨ ${colors.cyan(`[${pkg.name}]`)}` + ' - Icon generated successfully:' + `[${prefixSet}]`,
-      );
-    });
-}
-
-generateIcon();
-/**
- * Get the configuration file variable name
- * @param env
- */
-export const getConfigFileName = (env: Record<string, any>) => {
-  return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`
-    .toUpperCase()
-    .replace(/\s/g, '');
-};
-/**
- * Generate additional configuration files when used for packaging. The file can be configured with some global variables, so that it can be changed directly externally without repackaging
- */
-import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant';
-import fs, { writeFileSync } from 'fs-extra';
-import colors from 'picocolors';
-
-import { getEnvConfig, getRootPath } from '../utils';
-import { getConfigFileName } from '../getConfigFileName';
-
-import pkg from '../../package.json';
-
-interface CreateConfigParams {
-  configName: string;
-  config: any;
-  configFileName?: string;
-}
-
-function createConfig(params: CreateConfigParams) {
-  const { configName, config, configFileName } = params;
-  try {
-    const windowConf = `window.${configName}`;
-    // Ensure that the variable will not be modified
-    let configStr = `${windowConf}=${JSON.stringify(config)};`;
-    configStr += `
-      Object.freeze(${windowConf});
-      Object.defineProperty(window, "${configName}", {
-        configurable: false,
-        writable: false,
-      });
-    `.replace(/\s/g, '');
-
-    fs.mkdirp(getRootPath(OUTPUT_DIR));
-    writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr);
-
-    console.log(colors.cyan(`✨ [${pkg.name}]`) + ` - configuration file is build successfully:`);
-    console.log(colors.gray(OUTPUT_DIR + '/' + colors.green(configFileName)) + '\n');
-  } catch (error) {
-    console.log(colors.red('configuration file configuration file failed to package:\n' + error));
-  }
-}
-
-export function runBuildConfig() {
-  const config = getEnvConfig();
-  const configFileName = getConfigFileName(config);
-  createConfig({ config, configName: configFileName, configFileName: GLOB_CONFIG_FILE_NAME });
-}
-// #!/usr/bin/env node
-
-import { runBuildConfig } from './buildConf';
-import colors from 'picocolors';
-
-import pkg from '../../package.json';
-
-export const runBuild = async () => {
-  try {
-    const argvList = process.argv.splice(2);
-
-    // Generate configuration file
-    if (!argvList.includes('disabled-config')) {
-      runBuildConfig();
-    }
-
-    console.log(`✨ ${colors.cyan(`[${pkg.name}]`)}` + ' - build successfully!');
-  } catch (error) {
-    console.log(colors.red('vite build error:\n' + error));
-    process.exit(1);
-  }
-};
-runBuild();
-/**
- * Plugin to minimize and use ejs template syntax in index.html.
- * https://github.com/anncwb/vite-plugin-html
- */
-import type { PluginOption } from 'vite';
-import { createHtmlPlugin } from 'vite-plugin-html';
-import pkg from '../../../package.json';
-import { GLOB_CONFIG_FILE_NAME } from '../../constant';
-
-export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
-  const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
-
-  const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
-
-  const getAppConfigSrc = () => {
-    return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
-  };
-
-  const htmlPlugin: PluginOption[] = createHtmlPlugin({
-    minify: isBuild,
-    inject: {
-      // Inject data into ejs template
-      data: {
-        title: VITE_GLOB_APP_TITLE,
-      },
-      // Embed the generated app.config.js file
-      tags: isBuild
-        ? [
-            {
-              tag: 'script',
-              attrs: {
-                src: getAppConfigSrc(),
-              },
-            },
-          ]
-        : [],
-    },
-  });
-  return htmlPlugin;
-}
-/**
- * Used to parse the .env.development proxy configuration
- */
-import type { ProxyOptions } from 'vite';
-
-type ProxyItem = [string, string];
-
-type ProxyList = ProxyItem[];
-
-type ProxyTargetList = Record<string, ProxyOptions>;
-
-const httpsRE = /^https:\/\//;
-
-/**
- * Generate proxy
- * @param list
- */
-export function createProxy(list: ProxyList = []) {
-  const ret: ProxyTargetList = {};
-  for (const [prefix, target] of list) {
-    const isHttps = httpsRE.test(target);
-
-    // https://github.com/http-party/node-http-proxy#options
-    ret[prefix] = {
-      target: target,
-      changeOrigin: true,
-      ws: true,
-      rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),
-      // https is require secure=false
-      ...(isHttps ? { secure: false } : {}),
-    };
-  }
-  return ret;
-}
@@ -8,20 +8,10 @@
       name="viewport"
       content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
     />
-    <title><%= title %></title>
+    <title><%= VITE_GLOB_APP_TITLE %></title>
     <link rel="icon" href="/favicon.ico" />
   </head>
   <body>
-    <script>
-      (() => {
-        var htmlRoot = document.getElementById('htmlRoot');
-        var theme = window.localStorage.getItem('__APP__DARK__MODE__');
-        if (htmlRoot && theme) {
-          htmlRoot.setAttribute('data-theme', theme);
-          theme = htmlRoot = null;
-        }
-      })();
-    </script>
     <div id="app">
       <style>
         html[data-theme='dark'] .app-loading {
@@ -150,11 +140,11 @@
       </style>
       <div class="app-loading">
         <div class="app-loading-wrap">
-          <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" />
+          <img src="/logo.png" class="app-loading-logo" alt="Logo" />
           <div class="app-loading-dots">
             <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
           </div>
-          <div class="app-loading-title"><%= title %></div>
+          <div class="app-loading-title"><%= VITE_GLOB_APP_TITLE %></div>
         </div>
       </div>
     </div>
@@ -2,6 +2,15 @@
   "name": "@vben/eslint-config",
   "version": "1.0.0",
   "private": true,
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": {
+    "url": "https://github.com/vbenjs/vue-vben-admin/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "internal/eslint-config"
+  },
   "license": "MIT",
   "exports": {
     ".": {
@@ -2,6 +2,15 @@
   "name": "@vben/stylelint-config",
   "version": "1.0.0",
   "private": true,
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": {
+    "url": "https://github.com/vbenjs/vue-vben-admin/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "internal/stylelint-config"
+  },
   "license": "MIT",
   "exports": {
     ".": {
 {
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Node Server  Config",
+  "extends": "./base.json",
   "compilerOptions": {
     "module": "commonjs",
     "declaration": false,
@@ -4,9 +4,9 @@
   "extends": "./base.json",
   "compilerOptions": {
     "lib": ["ESNext"],
-    "types": ["vite/client"],
     "noImplicitAny": true,
     "sourceMap": true,
-    "noEmit": true
+    "noEmit": true,
+    "baseUrl": "./"
   }
 }
@@ -2,11 +2,23 @@
   "name": "@vben/ts-config",
   "version": "1.0.0",
   "private": true,
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": {
+    "url": "https://github.com/vbenjs/vue-vben-admin/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "internal/ts-config"
+  },
   "license": "MIT",
   "files": [
     "base.json",
     "node.json",
-    "vue.json"
+    "vue.json",
+    "node-server.json"
   ],
-  "devDependencies": {}
+  "dependencies": {
+    "@types/node": "^18.15.11"
+  }
 }
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const scopes = fs
+  .readdirSync(path.resolve(__dirname, 'src'), { withFileTypes: true })
+  .filter((dirent) => dirent.isDirectory())
+  .map((dirent) => dirent.name.replace(/s$/, ''));
+
+// precomputed scope
+const scopeComplete = execSync('git status --porcelain || true')
+  .toString()
+  .trim()
+  .split('\n')
+  .find((r) => ~r.indexOf('M  src'))
+  ?.replace(/(\/)/g, '%%')
+  ?.match(/src%%((\w|-)*)/)?.[1]
+  ?.replace(/s$/, '');
+
+/** @type {import('cz-git').UserConfig} */
+module.exports = {
+  ignores: [(commit) => commit.includes('init')],
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-leading-blank': [2, 'always'],
+    'footer-leading-blank': [1, 'always'],
+    'header-max-length': [2, 'always', 108],
+    'subject-empty': [2, 'never'],
+    'type-empty': [2, 'never'],
+    'subject-case': [0],
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'perf',
+        'style',
+        'docs',
+        'test',
+        'refactor',
+        'build',
+        'ci',
+        'chore',
+        'revert',
+        'wip',
+        'workflow',
+        'types',
+        'release',
+      ],
+    ],
+  },
+  prompt: {
+    /** @use `yarn commit :f` */
+    alias: {
+      f: 'docs: fix typos',
+      r: 'docs: update README',
+      s: 'style: update code format',
+      b: 'build: bump dependencies',
+      c: 'chore: update config',
+    },
+    customScopesAlign: !scopeComplete ? 'top' : 'bottom',
+    defaultScope: scopeComplete,
+    scopes: [...scopes, 'mock'],
+    allowEmptyIssuePrefixs: false,
+    allowCustomIssuePrefixs: false,
+
+    // English
+    typesAppend: [
+      { value: 'wip', name: 'wip:      work in process' },
+      { value: 'workflow', name: 'workflow: workflow improvements' },
+      { value: 'types', name: 'types:    type definition file changes' },
+    ],
+
+    // 中英文对照版
+    // messages: {
+    //   type: '选择你要提交的类型 :',
+    //   scope: '选择一个提交范围 (可选):',
+    //   customScope: '请输入自定义的提交范围 :',
+    //   subject: '填写简短精炼的变更描述 :\n',
+    //   body: '填写更加详细的变更描述 (可选)。使用 "|" 换行 :\n',
+    //   breaking: '列举非兼容性重大的变更 (可选)。使用 "|" 换行 :\n',
+    //   footerPrefixsSelect: '选择关联issue前缀 (可选):',
+    //   customFooterPrefixs: '输入自定义issue前缀 :',
+    //   footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
+    //   confirmCommit: '是否提交或修改commit ?',
+    // },
+    // types: [
+    //   { value: 'feat', name: 'feat:     新增功能' },
+    //   { value: 'fix', name: 'fix:      修复缺陷' },
+    //   { value: 'docs', name: 'docs:     文档变更' },
+    //   { value: 'style', name: 'style:    代码格式' },
+    //   { value: 'refactor', name: 'refactor: 代码重构' },
+    //   { value: 'perf', name: 'perf:     性能优化' },
+    //   { value: 'test', name: 'test:     添加疏漏测试或已有测试改动' },
+    //   { value: 'build', name: 'build:    构建流程、外部依赖变更 (如升级 npm 包、修改打包配置等)' },
+    //   { value: 'ci', name: 'ci:       修改 CI 配置、脚本' },
+    //   { value: 'revert', name: 'revert:   回滚 commit' },
+    //   { value: 'chore', name: 'chore:    对构建过程或辅助工具和库的更改 (不影响源文件、测试用例)' },
+    //   { value: 'wip', name: 'wip:      正在开发中' },
+    //   { value: 'workflow', name: 'workflow: 工作流程改进' },
+    //   { value: 'types', name: 'types:    类型定义文件修改' },
+    // ],
+    // emptyScopesAlias: 'empty:      不填写',
+    // customScopesAlias: 'custom:     自定义',
+  },
+};
+
+*.sh
+node_modules
+*.md
+*.woff
+*.ttf
+.vscode
+.idea
+dist
+/public
+/docs
+.husky
+.local
+/bin
+Dockerfile
+module.exports = {
+  root: true,
+  extends: ['@vben'],
+};
+dist
+.local
+.output.js
+node_modules
+
+**/*.svg
+**/*.sh
+
+public
+.npmrc
+module.exports = {
+  printWidth: 100,
+  semi: true,
+  vueIndentScriptAndStyle: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'auto',
+  plugins: ['prettier-plugin-packagejson'],
+  overrides: [
+    {
+      files: '.*rc',
+      options: {
+        parser: 'json',
+      },
+    },
+  ],
+};
+dist
+public
+module.exports = {
+  root: true,
+  extends: ['@vben/stylelint-config'],
+};
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  entries: ['src/index'],
+  declaration: true,
+  rollup: {
+    emitCJS: true,
+  },
+});
+{
+  "name": "@vben/vite-config",
+  "version": "1.0.0",
+  "private": true,
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": {
+    "url": "https://github.com/vbenjs/vue-vben-admin/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "internal/vite-config"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "pnpm rimraf .turbo node_modules dist",
+    "lint": "pnpm eslint .",
+    "stub": "pnpm unbuild --stub"
+  },
+  "dependencies": {
+    "vite": "^4.3.0-beta.1"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.1",
+    "ant-design-vue": "^3.2.16",
+    "dayjs": "^1.11.7",
+    "dotenv": "^16.0.3",
+    "fs-extra": "^11.1.1",
+    "less": "^4.1.3",
+    "picocolors": "^1.0.0",
+    "pkg-types": "^1.0.2",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "sass": "^1.60.0",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-purge-icons": "^0.9.2",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-windicss": "^1.8.10"
+  }
+}
+import { type UserConfig, defineConfig, mergeConfig, loadEnv } from 'vite';
+import { resolve } from 'node:path';
+import { readPackageJSON } from 'pkg-types';
+import { generateModifyVars } from '../utils/modifyVars';
+import { commonConfig } from './common';
+import { createPlugins } from '../plugins';
+import dayjs from 'dayjs';
+
+interface DefineOptions {
+  overrides?: UserConfig;
+  options?: {};
+}
+
+function defineApplicationConfig(defineOptions: DefineOptions = {}) {
+  const { overrides = {} } = defineOptions;
+
+  return defineConfig(async ({ command, mode }) => {
+    const root = process.cwd();
+    const isBuild = command === 'build';
+    const { VITE_USE_MOCK, VITE_BUILD_COMPRESS, VITE_ENABLE_ANALYZE } = loadEnv(mode, root);
+
+    const defineData = await createDefineData(root);
+    const plugins = await createPlugins({
+      isBuild,
+      root,
+      enableAnalyze: VITE_ENABLE_ANALYZE === 'true',
+      enableMock: VITE_USE_MOCK === 'true',
+      compress: VITE_BUILD_COMPRESS,
+    });
+
+    const pathResolve = (pathname: string) => resolve(root, '.', pathname);
+
+    const applicationConfig: UserConfig = {
+      optimizeDeps: {
+        include: [
+          '@iconify/iconify',
+          'ant-design-vue/es/locale/zh_CN',
+          'ant-design-vue/es/locale/en_US',
+        ],
+      },
+      resolve: {
+        alias: [
+          {
+            find: 'vue-i18n',
+            replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
+          },
+          // /@/xxxx => src/xxxx
+          {
+            find: /\/@\//,
+            replacement: pathResolve('src') + '/',
+          },
+          // /#/xxxx => types/xxxx
+          {
+            find: /\/#\//,
+            replacement: pathResolve('types') + '/',
+          },
+          // @/xxxx => src/xxxx
+          {
+            find: /@\//,
+            replacement: pathResolve('src') + '/',
+          },
+          // #/xxxx => types/xxxx
+          {
+            find: /#\//,
+            replacement: pathResolve('types') + '/',
+          },
+        ],
+      },
+      define: defineData,
+      build: {
+        target: 'es2015',
+        cssTarget: 'chrome80',
+        rollupOptions: {
+          output: {
+            manualChunks: {
+              vue: ['vue', 'pinia', 'vue-router'],
+              antdv: ['ant-design-vue', '@ant-design/icons-vue'],
+            },
+          },
+        },
+      },
+      css: {
+        preprocessorOptions: {
+          less: {
+            modifyVars: generateModifyVars(),
+            javascriptEnabled: true,
+          },
+        },
+      },
+      plugins,
+    };
+
+    const mergedConfig = mergeConfig(commonConfig, applicationConfig);
+
+    return mergeConfig(mergedConfig, overrides);
+  });
+}
+
+async function createDefineData(root: string) {
+  try {
+    const pkgJson = await readPackageJSON(root);
+    const { dependencies, devDependencies, name, version } = pkgJson;
+
+    const __APP_INFO__ = {
+      pkg: { dependencies, devDependencies, name, version },
+      lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+    };
+    return {
+      __APP_INFO__: JSON.stringify(__APP_INFO__),
+    };
+  } catch (error) {
+    return {};
+  }
+}
+
+export { defineApplicationConfig };
+import { type UserConfig } from 'vite';
+
+const commonConfig: UserConfig = {
+  server: {
+    host: true,
+  },
+  esbuild: {
+    drop: ['console', 'debugger'],
+  },
+  build: {
+    reportCompressedSize: false,
+    chunkSizeWarningLimit: 1500,
+    rollupOptions: {
+      // TODO: Prevent memory overflow
+      maxParallelFileOps: 3,
+    },
+  },
+};
+
+export { commonConfig };
+function definePackageConfig() {
+  // TODO:
+}
+
+export { definePackageConfig };
+export * from './config/application';
+import { type PluginOption } from 'vite';
+import { getEnvConfig } from '../utils/env';
+import { createContentHash } from '../utils/hash';
+import { readPackageJSON } from 'pkg-types';
+import colors from 'picocolors';
+
+const GLOBAL_CONFIG_FILE_NAME = '_app.config.js';
+const PLUGIN_NAME = 'app-config';
+
+async function createAppConfigPlugin({
+  root,
+  isBuild,
+}: {
+  root: string;
+  isBuild: boolean;
+}): Promise<PluginOption> {
+  let publicPath: string;
+  let source: string;
+  if (!isBuild) {
+    return {
+      name: PLUGIN_NAME,
+    };
+  }
+  const { version = '' } = await readPackageJSON(root);
+
+  return {
+    name: PLUGIN_NAME,
+    async configResolved(_config) {
+      const appTitle = _config?.env?.VITE_GLOB_APP_SHORT_NAME ?? '';
+      publicPath = _config.base;
+      source = await getConfigSource(appTitle);
+    },
+    async transformIndexHtml(html) {
+      publicPath = publicPath.endsWith('/') ? publicPath : `${publicPath}/`;
+
+      const appConfigSrc = `${
+        publicPath || '/'
+      }${GLOBAL_CONFIG_FILE_NAME}?v=${version}-${createContentHash(source)}}`;
+
+      return {
+        html,
+        tags: [
+          {
+            tag: 'script',
+            attrs: {
+              src: appConfigSrc,
+            },
+          },
+        ],
+      };
+    },
+    async generateBundle() {
+      try {
+        this.emitFile({
+          type: 'asset',
+          fileName: GLOBAL_CONFIG_FILE_NAME,
+          source,
+        });
+
+        console.log(colors.cyan(`✨configuration file is build successfully!`));
+      } catch (error) {
+        console.log(
+          colors.red('configuration file configuration file failed to package:\n' + error),
+        );
+      }
+    },
+  };
+}
+
+/**
+ * Get the configuration file variable name
+ * @param env
+ */
+const getVariableName = (title: string) => {
+  return `__PRODUCTION__${title || '__APP'}__CONF__`.toUpperCase().replace(/\s/g, '');
+};
+
+async function getConfigSource(appTitle: string) {
+  const config = await getEnvConfig();
+  const variableName = getVariableName(appTitle);
+  const windowVariable = `window.${variableName}`;
+  // Ensure that the variable will not be modified
+  let source = `${windowVariable}=${JSON.stringify(config)};`;
+  source += `
+    Object.freeze(${windowVariable});
+    Object.defineProperty(window, "${variableName}", {
+      configurable: false,
+      writable: false,
+    });
+  `.replace(/\s/g, '');
+  return source;
+}
+
+export { createAppConfigPlugin };
@@ -5,10 +5,13 @@
 import type { PluginOption } from 'vite';
 import compressPlugin from 'vite-plugin-compression';
-export function configCompressPlugin(
-  compress: 'gzip' | 'brotli' | 'none',
+export function configCompressPlugin({
+  compress,
   deleteOriginFile = false,
-): PluginOption | PluginOption[] {
+}: {
+  compress: string;
+  deleteOriginFile?: boolean;
+}): PluginOption[] {
   const compressList = compress.split(',');
   const plugins: PluginOption[] = [];
+/**
+ * Plugin to minimize and use ejs template syntax in index.html.
+ * https://github.com/anncwb/vite-plugin-html
+ */
+import type { PluginOption } from 'vite';
+import { createHtmlPlugin } from 'vite-plugin-html';
+
+export function configHtmlPlugin({ isBuild }: { isBuild: boolean }) {
+  const htmlPlugin: PluginOption[] = createHtmlPlugin({
+    minify: isBuild,
+  });
+  return htmlPlugin;
+}
-import { PluginOption } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import vueJsx from '@vitejs/plugin-vue-jsx';
-import purgeIcons from 'vite-plugin-purge-icons';
-import windiCSS from 'vite-plugin-windicss';
+import { type PluginOption } from 'vite';
 import { configHtmlPlugin } from './html';
 import { configMockPlugin } from './mock';
 import { configCompressPlugin } from './compress';
 import { configVisualizerConfig } from './visualizer';
 import { configSvgIconsPlugin } from './svgSprite';
+import { createAppConfigPlugin } from './appConfig';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import purgeIcons from 'vite-plugin-purge-icons';
+import windiCSS from 'vite-plugin-windicss';
-export async function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
-  const { VITE_USE_MOCK, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
+interface Options {
+  isBuild: boolean;
+  root: string;
+  compress: string;
+  enableMock?: boolean;
+  enableAnalyze?: boolean;
+}
-  const vitePlugins: (PluginOption | PluginOption[])[] = [
-    // have to
-    vue(),
-    // have to
-    vueJsx(),
-  ];
+async function createPlugins({ isBuild, root, enableMock, compress, enableAnalyze }: Options) {
+  const vitePlugins: (PluginOption | PluginOption[])[] = [vue(), vueJsx()];
+
+  const appConfigPlugin = await createAppConfigPlugin({ root, isBuild });
+  vitePlugins.push(appConfigPlugin);
   // vite-plugin-windicss
   vitePlugins.push(windiCSS());
   // vite-plugin-html
-  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
+  vitePlugins.push(configHtmlPlugin({ isBuild }));
   // vite-plugin-svg-icons
-  vitePlugins.push(configSvgIconsPlugin(isBuild));
-
-  // vite-plugin-mock
-  VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild));
+  vitePlugins.push(configSvgIconsPlugin({ isBuild }));
   // vite-plugin-purge-icons
   vitePlugins.push(purgeIcons());
-  // rollup-plugin-visualizer
-  vitePlugins.push(configVisualizerConfig());
-
   // The following plugins only work in the production environment
   if (isBuild) {
     // rollup-plugin-gzip
     vitePlugins.push(
-      configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE),
+      configCompressPlugin({
+        compress,
+      }),
     );
   }
+  // rollup-plugin-visualizer
+  if (enableAnalyze) {
+    vitePlugins.push(configVisualizerConfig());
+  }
+
+  // vite-plugin-mock
+  if (enableMock) {
+    vitePlugins.push(configMockPlugin({ isBuild }));
+  }
+
   return vitePlugins;
 }
+
+export { createPlugins };
@@ -4,7 +4,7 @@
  */
 import { viteMockServe } from 'vite-plugin-mock';
-export function configMockPlugin(isBuild: boolean) {
+export function configMockPlugin({ isBuild }: { isBuild: boolean }) {
   return viteMockServe({
     ignore: /^_/,
     mockPath: 'mock',
@@ -4,15 +4,13 @@
  */
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
-import path from 'path';
+import { resolve } from 'node:path';
 import type { PluginOption } from 'vite';
-export function configSvgIconsPlugin(isBuild: boolean) {
+export function configSvgIconsPlugin({ isBuild }: { isBuild: boolean }) {
   const svgIconsPlugin = createSvgIconsPlugin({
-    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+    iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
     svgoOptions: isBuild,
-    // default
-    symbolId: 'icon-[dir]-[name]',
   });
   return svgIconsPlugin as PluginOption;
 }
 /**
  * Package file volume analysis
  */
+import { type PluginOption } from 'vite';
 import visualizer from 'rollup-plugin-visualizer';
 export function configVisualizerConfig() {
-  if (process.env.REPORT === 'true') {
-    return visualizer({
-      filename: './node_modules/.cache/visualizer/stats.html',
-      open: true,
-      gzipSize: true,
-      brotliSize: true,
-    }) as Plugin;
-  }
-  return [];
+  return visualizer({
+    filename: './node_modules/.cache/visualizer/stats.html',
+    open: true,
+    gzipSize: true,
+    brotliSize: true,
+  }) as PluginOption;
 }
-import fs from 'fs';
-import path from 'path';
 import dotenv from 'dotenv';
-
-// Read all environment variable configuration files to process.env
-export function wrapperEnv(envConf: Recordable): ViteEnv {
-  const ret: any = {};
-
-  for (const envName of Object.keys(envConf)) {
-    let realName = envConf[envName].replace(/\\n/g, '\n');
-    realName = realName === 'true' ? true : realName === 'false' ? false : realName;
-    if (envName === 'VITE_PROXY' && realName) {
-      try {
-        realName = JSON.parse(realName.replace(/'/g, '"'));
-      } catch (error) {
-        realName = '';
-      }
-    }
-    ret[envName] = realName;
-    // if (typeof realName === 'string') {
-    //   process.env[envName] = realName;
-    // } else if (typeof realName === 'object') {
-    //   process.env[envName] = JSON.stringify(realName);
-    // }
-  }
-  return ret;
-}
+import { readFile } from 'fs-extra';
+import { join } from 'node:path';
 /**
  * 获取当前环境下生效的配置文件名
  */
 function getConfFiles() {
-  const script = process.env.npm_lifecycle_script;
+  const script = process.env.npm_lifecycle_script as string;
   const reg = new RegExp('--mode ([a-z_\\d]+)');
-  const result = reg.exec(script as string) as any;
+  const result = reg.exec(script);
   if (result) {
-    const mode = result[1] as string;
+    const mode = result[1];
     return ['.env', `.env.${mode}`];
   }
   return ['.env', '.env.production'];
@@ -45,16 +21,18 @@ function getConfFiles() {
  * @param match prefix
  * @param confFiles ext
  */
-export function getEnvConfig(match = 'VITE_GLOB_', confFiles = getConfFiles()) {
+export async function getEnvConfig(match = 'VITE_GLOB_', confFiles = getConfFiles()) {
   let envConfig = {};
-  confFiles.forEach((item) => {
+
+  for (const confFile of confFiles) {
     try {
-      const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item)));
+      const envPath = await readFile(join(process.cwd(), confFile), { encoding: 'utf8' });
+      const env = dotenv.parse(envPath);
       envConfig = { ...envConfig, ...env };
     } catch (e) {
-      console.error(`Error in parsing ${item}`, e);
+      console.error(`Error in parsing ${confFile}`, e);
     }
-  });
+  }
   const reg = new RegExp(`^(${match})`);
   Object.keys(envConfig).forEach((key) => {
     if (!reg.test(key)) {
@@ -63,11 +41,3 @@ export function getEnvConfig(match = &#39;VITE_GLOB_&#39;, confFiles = getConfFiles()) {
   });
   return envConfig;
 }
-
-/**
- * Get user root directory
- * @param dir file path
- */
-export function getRootPath(...dir: string[]) {
-  return path.resolve(process.cwd(), ...dir);
-}
+import { createHash } from 'node:crypto';
+
+function createContentHash(content: string, hashLSize = 12) {
+  const hash = createHash('sha256').update(content);
+  return hash.digest('hex').slice(0, hashLSize);
+}
+
+export { createContentHash };
-import { generateAntColors, primaryColor } from '../config/themeConfig';
+import { generate } from '@ant-design/colors';
+import { resolve } from 'node:path';
+// @ts-ignore
 import { getThemeVariables } from 'ant-design-vue/dist/theme';
-import { resolve } from 'path';
+
+const primaryColor = '#0960bd';
+
+function generateAntColors(color: string, theme: 'default' | 'dark' = 'default') {
+  return generate(color, {
+    theme,
+  });
+}
 /**
  * less global variable
  */
-export function generateModifyVars(dark = false) {
+export function generateModifyVars() {
   const palettes = generateAntColors(primaryColor);
   const primary = palettes[5];
@@ -15,10 +24,9 @@ export function generateModifyVars(dark = false) {
     primaryColorObj[`primary-${index + 1}`] = palettes[index];
   }
-  const modifyVars = getThemeVariables({ dark });
+  const modifyVars = getThemeVariables();
   return {
     ...modifyVars,
-    // Used for global import to avoid the need to import each style file separately
     // reference:  Avoid repeated references
     hack: `${modifyVars.hack} @import (reference) "${resolve('src/design/config.less')}";`,
     'primary-color': primary,
@@ -28,7 +36,6 @@ export function generateModifyVars(dark = false) {
     'success-color': '#55D187', //  Success color
     'error-color': '#ED6F6F', //  False color
     'warning-color': '#EFBD47', //   Warning color
-    //'border-color-base': '#EEEEEE',
     'font-size-base': '14px', //  Main font size
     'border-radius-base': '2px', //  Component/float fillet
     'link-color': primary, //   Link color
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/ts-config/node.json",
+  "include": ["src"]
+}
 {
   "name": "vben-admin",
   "version": "2.9.0",
-  "homepage": "https://github.com/anncwb/vue-vben-admin",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
   "bugs": {
-    "url": "https://github.com/anncwb/vue-vben-admin/issues"
+    "url": "https://github.com/vbenjs/vue-vben-admin/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/anncwb/vue-vben-admin.git"
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git"
   },
   "license": "MIT",
   "author": {
@@ -17,29 +17,23 @@
   },
   "scripts": {
     "bootstrap": "pnpm install",
-    "build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 NODE_ENV=production vite build && esno ./build/script/postBuild.ts",
+    "build": "NODE_ENV=production pnpm vite build",
+    "build:analyze": "pnpm vite build --mode analyze",
     "build:no-cache": "pnpm clean:cache && npm run build",
-    "build:test": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build --mode test && esno ./build/script/postBuild.ts",
-    "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
-    "clean:lib": "rimraf node_modules",
+    "build:test": "pnpm vite build --mode test",
     "commit": "czg",
-    "dev": "vite",
-    "gen:icon": "esno ./build/generate/icon/index.ts",
+    "dev": "pnpm vite",
     "preinstall": "npx only-allow pnpm",
     "postinstall": "turbo run stub",
     "lint": "turbo run lint",
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
-    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
+    "lint:prettier": "prettier --write .",
     "lint:stylelint": "stylelint \"**/*.{vue,css,less.scss}\" --fix --cache --cache-location node_modules/.cache/stylelint/",
     "prepare": "husky install",
     "preview": "npm run build && vite preview",
-    "preview:dist": "vite preview",
     "reinstall": "rimraf pnpm-lock.yaml && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
-    "report": "cross-env REPORT=true npm run build",
     "serve": "npm run dev",
-    "test:br": "npx http-server dist --cors --brotli -c-1",
     "test:gzip": "npx http-server dist --cors --gzip -c-1",
-    "test:unit": "jest",
     "type:check": "vue-tsc --noEmit --skipLibCheck"
   },
   "lint-staged": {
@@ -82,7 +76,7 @@
     "@vueuse/core": "^9.13.0",
     "@vueuse/shared": "^9.13.0",
     "@zxcvbn-ts/core": "^2.2.1",
-    "ant-design-vue": "^3.2.16",
+    "ant-design-vue": "^3.2.17",
     "axios": "^1.3.4",
     "codemirror": "^5.65.12",
     "cropperjs": "^1.5.13",
@@ -121,12 +115,9 @@
     "@purge-icons/generated": "^0.9.0",
     "@types/codemirror": "^5.60.7",
     "@types/crypto-js": "^4.1.1",
-    "@types/fs-extra": "^11.0.1",
-    "@types/inquirer": "^8.2.6",
     "@types/intro.js": "^5.1.1",
     "@types/lodash-es": "^4.17.7",
     "@types/mockjs": "^1.0.7",
-    "@types/node": "^18.15.11",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.5.0",
     "@types/qs": "^6.9.7",
@@ -135,6 +126,7 @@
     "@vben/eslint-config": "workspace:*",
     "@vben/stylelint-config": "workspace:*",
     "@vben/ts-config": "workspace:*",
+    "@vben/vite-config": "workspace:*",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/compiler-sfc": "^3.2.47",
@@ -142,32 +134,16 @@
     "cross-env": "^7.0.3",
     "cz-git": "^1.6.1",
     "czg": "^1.6.1",
-    "dotenv": "^16.0.3",
-    "esno": "^0.16.3",
-    "fs-extra": "^11.1.1",
     "husky": "^8.0.3",
-    "inquirer": "^9.1.5",
-    "less": "^4.1.3",
     "lint-staged": "13.2.0",
-    "picocolors": "^1.0.0",
-    "postcss": "^8.4.21",
-    "postcss-html": "^1.5.0",
-    "postcss-less": "^6.0.0",
     "prettier": "^2.8.7",
     "prettier-plugin-packagejson": "^2.4.3",
     "rimraf": "^4.4.1",
-    "rollup-plugin-visualizer": "^5.9.0",
-    "sass": "^1.60.0",
     "turbo": "^1.8.8",
     "typescript": "^5.0.3",
     "unbuild": "^1.2.0",
     "vite": "^4.3.0-beta.1",
-    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-html": "^3.2.0",
     "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-purge-icons": "^0.9.2",
-    "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-windicss": "^1.8.10",
     "vue-tsc": "^1.2.0"
   },
   "packageManager": "pnpm@8.1.0",