fix: Add base and assetsDir to dynamicLoadingCss to support loading s…

…tyle file addresses using the base configuration.
originjs · Jan 11, 2025 · 766b521 · 766b521
1 parent 538e258
commit 766b521
Showing 1 changed file with 58 additions and 39 deletions.
diff --git a/packages/lib/src/prod/expose-production.ts b/packages/lib/src/prod/expose-production.ts
@@ -78,49 +78,57 @@ export function prodExposePlugin(
       const currentImports = {}
       const exportSet = new Set(['Module', '__esModule', 'default', '_export_sfc']);
       let moduleMap = {${moduleMap}}
-    const seen = {}
-    export const ${DYNAMIC_LOADING_CSS} = (cssFilePaths, dontAppendStylesToHead, exposeItemName) => {
-      const metaUrl = import.meta.url
-      if (typeof metaUrl == 'undefined') {
-        console.warn('The remote style takes effect only when the build.target option in the vite.config.ts file is higher than that of "es2020".')
-        return
-      }
-      const curUrl = metaUrl.substring(0, metaUrl.lastIndexOf('${options.filename}'))
+      const seen = {}
+      export const ${DYNAMIC_LOADING_CSS} = (cssFilePaths, dontAppendStylesToHead, exposeItemName) => {
+        const metaUrl = import.meta.url;
+        if (typeof metaUrl === 'undefined') {
+          console.warn('The remote style takes effect only when the build.target option in the vite.config.ts file is higher than that of "es2020".');
+          return;
+        }
+
+        const curUrl = metaUrl.substring(0, metaUrl.lastIndexOf('${options.filename}'));
+        const base = __VITE_BASE_PLACEHOLDER__;
+        const assetsDir = __VITE_ASSETS_DIR_PLACEHOLDER__;
+
+        cssFilePaths.forEach(cssPath => {
+          const baseUrl = base || curUrl;
+          const href = [baseUrl, assetsDir, cssPath].filter(Boolean).join('/');
+
+          if (href in seen) return;
+          seen[href] = true;
 
-      cssFilePaths.forEach(cssFilePath => {
-        const href = curUrl + cssFilePath
-        if (href in seen) return
-        seen[href] = true
-        if (dontAppendStylesToHead) {
-          const key = 'css__${options.name}__' + exposeItemName;
-          if (window[key] == null) window[key] = []
+          if (!dontAppendStylesToHead) {
+            const element = document.createElement('link');
+            element.rel = 'stylesheet';
+            element.href = href;
+            document.head.appendChild(element);
+            return;
+          }
+
+          const key = 'css__' + options.name + '__' + exposeItemName;
+          window[key] = window[key] || [];
           window[key].push(href);
-        } else {
-          const element = document.head.appendChild(document.createElement('link'))
-          element.href = href
-          element.rel = 'stylesheet'
-        }
-      })
-    };
-    async function __federation_import(name) {
+        });
+      };
+      async function __federation_import(name) {
         currentImports[name] ??= import(name)
         return currentImports[name]
-    };
-    export const get =(module) => {
-      if(!moduleMap[module]) throw new Error('Can not find remote module ' + module)
-      return moduleMap[module]();
-    };
-    export const init =(shareScope) => {
-      globalThis.__federation_shared__= globalThis.__federation_shared__|| {};
-      Object.entries(shareScope).forEach(([key, value]) => {
-        const versionKey = Object.keys(value)[0];
-        const versionValue = Object.values(value)[0];
-        const scope = versionValue.scope || 'default'
-        globalThis.__federation_shared__[scope] = globalThis.__federation_shared__[scope] || {};
-        const shared= globalThis.__federation_shared__[scope];
-        (shared[key] = shared[key]||{})[versionKey] = versionValue;
-      });
-    }`
+      };
+      export const get =(module) => {
+        if(!moduleMap[module]) throw new Error('Can not find remote module ' + module)
+        return moduleMap[module]();
+      };
+      export const init =(shareScope) => {
+        globalThis.__federation_shared__= globalThis.__federation_shared__|| {};
+        Object.entries(shareScope).forEach(([key, value]) => {
+          const versionKey = Object.keys(value)[0];
+          const versionValue = Object.values(value)[0];
+          const scope = versionValue.scope || 'default'
+          globalThis.__federation_shared__[scope] = globalThis.__federation_shared__[scope] || {};
+          const shared= globalThis.__federation_shared__[scope];
+          (shared[key] = shared[key]||{})[versionKey] = versionValue;
+        });
+      }`
     },
 
     configResolved(config: ResolvedConfig) {
@@ -158,6 +166,17 @@ export function prodExposePlugin(
       }
       // placeholder replace
       if (remoteEntryChunk) {
+        // 替换 base 和 assetsDir 占位符
+        remoteEntryChunk.code = remoteEntryChunk.code
+          .replace(
+            '__VITE_BASE_PLACEHOLDER__',
+            `'${viteConfigResolved.config?.base || ''}'`
+          )
+          .replace(
+            '__VITE_ASSETS_DIR_PLACEHOLDER__',
+            `'${viteConfigResolved.config?.build?.assetsDir || ''}'`
+          );
+
         const filepathMap = new Map()
         const getFilename = (name) => parse(parse(name).name).name
         const cssBundlesMap: Map<string, OutputAsset | OutputChunk> =