fix: 修复子应用加载资源404问题，还需要改为运行时publicPath

https://v1.qiankun.umijs.org/zh/faq/#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%AD%90%E5%BA%94%E7%94%A8%E5%8A%A0%E8%BD%BD%E7%9A%84%E8%B5%84%E6%BA%90%E4%BC%9A-404%EF%BC%9F

packages/fes-plugin-qiankun/src/index.js

@@ -8,7 +8,7 @@ export default (api) => {
         config: {
             schema(joi) {
                 return joi.object().keys({
-                    mirco: joi.object(),
+                    micro: joi.object(),
                     main: joi.object()
                 });
             }
@@ -19,7 +19,7 @@ export default (api) => {
 
     api.registerPlugins([
         require.resolve('./main'),
-        require.resolve('./mirco')
+        require.resolve('./micro')
     ]);
 
     // const absRuntimeFilePath = join(namespace, 'runtime.js');

packages/fes-plugin-qiankun/src/micro/index.js

@@ -1,14 +1,15 @@
 import assert from 'assert';
+import address from 'address';
 import { lodash } from '@umijs/utils';
 import { readFileSync } from 'fs';
 import { join } from 'path';
 // import { defaultMircoRootId } from '../common';
 
-const namespace = 'plugin-qiankun/mirco';
+const namespace = 'plugin-qiankun/micro';
 
 export function isSlaveEnable(api) {
     return (
-        !!api.userConfig?.qiankun?.mirco
+        !!api.userConfig?.qiankun?.micro
       || lodash.isEqual(api.userConfig?.qiankun, {})
       || !!process.env.INITIAL_QIANKUN_MIRCO_OPTIONS
     );
@@ -27,15 +28,17 @@ export default function (api) {
     api.modifyPublicPathStr((publicPathStr) => {
         const { runtimePublicPath } = api.config;
         const qiankunConfig = api.config.qiankun || {};
-        if (!qiankunConfig || !qiankunConfig.mirco) {
+        if (!qiankunConfig || !qiankunConfig.micro) {
             return publicPathStr;
         }
         const { shouldNotModifyRuntimePublicPath } = qiankunConfig;
 
         if (runtimePublicPath === true && !shouldNotModifyRuntimePublicPath) {
-            return `window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || "${
+            // 这里必须使用__INJECTED_PUBLIC_PATH_BY_QIANKUN__，因为绝对地址只在开发时生效。
-                api.config.publicPath || '/'
+            // return `window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || "${api.config.publicPath || '/'}"`;
-            }"`;
+            const port = api.getPort();
+
+            return `//localhost:${port}${api.config.publicPath || '/'}`;
         }
 
         return publicPathStr;
@@ -47,8 +50,37 @@ export default function (api) {
         return config;
     });
 
+    const port = process.env.PORT;
+    // source-map 跨域设置
+    if (process.env.NODE_ENV === 'development' && port) {
+        const localHostname = process.env.USE_REMOTE_IP
+            ? address.ip()
+            : process.env.HOST || 'localhost';
+
+        const protocol = process.env.HTTPS ? 'https' : 'http';
+        // // 变更 webpack-dev-server websocket 默认监听地址
+        // process.env.SOCKET_SERVER = `${protocol}://${localHostname}:${port}/`;
+        api.chainWebpack((memo, { webpack }) => {
+            // 开启了 devSourceMap 配置，默认为 true
+            if (api.config.qiankun && api.config.qiankun.micro && api.config.qiankun.micro.devSourceMap !== false) {
+                // 禁用 devtool，启用 SourceMapDevToolPlugin
+                memo.devtool(false);
+                memo.plugin('source-map').use(webpack.SourceMapDevToolPlugin, [
+                    {
+                        // @ts-ignore
+                        namespace: api.pkg.name,
+                        append: `\n//# sourceMappingURL=${protocol}://${localHostname}:${port}/[url]`,
+                        filename: '[file].map'
+                    }
+                ]);
+            }
+            return memo;
+        });
+    }
+
     const absRuntimePath = join(namespace, 'runtime.js');
     const absLifeclesPath = join(namespace, 'lifecycles.js');
+    const absMicroOptionsPath = join(namespace, 'slaveOptions.js');
 
     api.onGenerateFiles(() => {
         api.writeTmpFile({
@@ -60,6 +92,15 @@ export default function (api) {
             path: absLifeclesPath,
             content: readFileSync(join(__dirname, 'runtime/lifecycles.tpl'), 'utf-8')
         });
+
+        api.writeTmpFile({
+            path: absMicroOptionsPath,
+            content: `
+            let options = ${JSON.stringify((api.config.qiankun || {}).micro || {})};
+            export const getSlaveOptions = () => options;
+            export const setSlaveOptions = (newOpts) => options = ({ ...options, ...newOpts });
+            `
+        });
     });
 
     api.addEntryImports(() => ({

packages/fes-plugin-qiankun/src/micro/runtime/lifecycles.tpl

@@ -78,9 +78,12 @@ export function genUpdate() {
 // 子应用生命周期钩子Unmount
 export function genUnmount(mountElementId) {
     return async (props) => {
-        const container = props?.container
+        let container;
-            ? props.container.querySelector(`#${mountElementId}`)
+        try {
-            : document.getElementById(mountElementId);
+            container = props?.container
+                ? props.container.querySelector(mountElementId)
+                : document.querySelector(mountElementId);
+        } catch (e) {}
         if (container && app) {
             app.unmount(container);
         }

packages/fes-preset-built-in/src/index.js

@@ -44,6 +44,7 @@ export default function () {
             require.resolve('./plugins/features/vueLoader'),
             require.resolve('./plugins/features/mock'),
             require.resolve('./plugins/features/dynamicImport'),
+            require.resolve('./plugins/features/runtimePublicPath'),
 
             // misc
             require.resolve('./plugins/misc/route'),

packages/fes-preset-built-in/src/plugins/commands/webpackConfig/resolveDefine.js

@@ -1,6 +1,6 @@
 const prefixRE = /^FES_APP_/;
 
-const ENV_SHOULD_PASS = ['NODE_ENV', 'FES_ENV', 'HMR', 'SOCKET_SERVER', 'ERROR_OVERLAY'];
+const ENV_SHOULD_PASS = ['NODE_ENV', 'FES_ENV'];
 
 export default function resolveDefine(opts = {}, raw) {
     const env = {};

packages/fes-preset-built-in/src/plugins/features/runtimePublicPath.js

@@ -0,0 +1,12 @@
+
+export default (api) => {
+    api.describe({
+        key: 'runtimePublicPath',
+        config: {
+            schema(joi) {
+                return joi.boolean();
+            }
+        },
+        default: false
+    });
+};