fix: 设置 baseurl 后不生效的问题 (#3318)

* fix: 设置 baseurl 后不生效

* chore: update vite-config antdv version

internal/vite-config/package.json

@@ -38,7 +38,7 @@
     "@types/fs-extra": "^11.0.1",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "ant-design-vue": "^4.0.3",
+    "ant-design-vue": "^4.0.6",
     "dayjs": "^1.11.9",
     "dotenv": "^16.3.1",
     "fs-extra": "^11.1.1",
@@ -48,7 +48,6 @@
     "rollup-plugin-visualizer": "^5.9.2",
     "sass": "^1.63.6",
     "unocss": "^0.53.4",
-    "unplugin-config": "^0.1.3",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-dts": "^3.1.0",
     "vite-plugin-html": "^3.2.0",

internal/vite-config/src/plugins/appConfig.ts

@@ -1,31 +1,104 @@
-import GenerateConfig from 'unplugin-config/vite';
+import colors from 'picocolors';
+import { readPackageJSON } from 'pkg-types';
 import { type PluginOption } from 'vite';
 
 import { getEnvConfig } from '../utils/env';
-import { strToHex } from '../utils/hash';
+import { createContentHash } from '../utils/hash';
 
 const GLOBAL_CONFIG_FILE_NAME = '_app.config.js';
-// This constant sets the output directory for the Vite package
+const PLUGIN_NAME = 'app-config';
-const OUTPUT_DIR = 'dist';
+
-export async function createConfigPluginConfig(
+async function createAppConfigPlugin({
-  shouldGenerateConfig: boolean,
+  root,
-): Promise<PluginOption> {
+  isBuild,
-  const config = await getEnvConfig();
+}: {
-  // LINK /src/utils/env.ts -> getVariableName
+  root: string;
-  const APP_NAME = strToHex(config?.VITE_GLOB_APP_TITLE ?? '__APP');
+  isBuild: boolean;
-  // https://github.com/kirklin/unplugin-config
+}): Promise<PluginOption> {
-  return GenerateConfig({
+  let publicPath: string;
-    appName: APP_NAME,
+  let source: string;
-    envVariables: {
+  if (!isBuild) {
-      prefix: 'VITE_GLOB_',
+    return {
+      name: PLUGIN_NAME,
+    };
+  }
+  const { version = '' } = await readPackageJSON(root);
+
+  return {
+    name: PLUGIN_NAME,
+    async configResolved(_config) {
+      const appTitle = _config?.env?.VITE_GLOB_APP_TITLE ?? '';
+      // appTitle = appTitle.replace(/\s/g, '_').replace(/-/g, '_');
+      publicPath = _config.base;
+      source = await getConfigSource(appTitle);
     },
-    configFile: {
+    async transformIndexHtml(html) {
-      generate: shouldGenerateConfig,
+      publicPath = publicPath.endsWith('/') ? publicPath : `${publicPath}/`;
-      fileName: GLOBAL_CONFIG_FILE_NAME,
+
-      outputDir: OUTPUT_DIR,
+      const appConfigSrc = `${
+        publicPath || '/'
+      }${GLOBAL_CONFIG_FILE_NAME}?v=${version}-${createContentHash(source)}`;
+
+      return {
+        html,
+        tags: [
+          {
+            tag: 'script',
+            attrs: {
+              src: appConfigSrc,
+            },
+          },
+        ],
+      };
     },
-    htmlInjection: {
+    async generateBundle() {
-      decodeEntities: true,
+      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) => {
+  function strToHex(str: string) {
+    const result: string[] = [];
+    for (let i = 0; i < str.length; ++i) {
+      const hex = str.charCodeAt(i).toString(16);
+      result.push(('000' + hex).slice(-4));
+    }
+    return result.join('').toUpperCase();
+  }
+  return `__PRODUCTION__${strToHex(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 };

internal/vite-config/src/plugins/index.ts

@@ -3,7 +3,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
 import { type PluginOption } from 'vite';
 import purgeIcons from 'vite-plugin-purge-icons';
 
-import { createConfigPluginConfig } from './appConfig';
+import { createAppConfigPlugin } from './appConfig';
 import { configCompressPlugin } from './compress';
 import { configHtmlPlugin } from './html';
 import { configMockPlugin } from './mock';
@@ -18,10 +18,10 @@ interface Options {
   enableAnalyze?: boolean;
 }
 
-async function createPlugins({ isBuild, enableMock, compress, enableAnalyze }: Options) {
+async function createPlugins({ isBuild, root, enableMock, compress, enableAnalyze }: Options) {
   const vitePlugins: (PluginOption | PluginOption[])[] = [vue(), vueJsx()];
 
-  const appConfigPlugin = await createConfigPluginConfig(isBuild);
+  const appConfigPlugin = await createAppConfigPlugin({ root, isBuild });
   vitePlugins.push(appConfigPlugin);
 
   // vite-plugin-html