qiankun部署后主应用获取子应用静态资源404的问题

( Ĭ ^ Ĭ )，这个坑，踩了好久，花了大量时间，但其实最后的解决不难，怪我粗心大意_(:з」∠)_

说下背景，首先我的主应用是用 next.js 写的，然后子应用是 react，主应用部署在一级目录，子应用部署在二级目录。路由使用的是 history。

为了区别生产环境和开发环境，需要配置 webpack 构建时的 publicPath，因为用的history 路由，所以子应用需要设置 base ，然后 nginx 也需要配合设置，不然刷新页面就会404。

publicPath的设置

NODE_ENV 用来判断是生产环境还是开发环境，生产环境的话publicPath为二级目录的前缀，开发环境则为空。

config-overrides.js

const { name } = require('./package.json');
const { override, fixBabelImports, addLessLoader, overrideDevServer, watchAll } = require(
  'customize-cra');

const { NODE_ENV, REACT_APP_ROUTER_PATH } = process.env;

module.exports = {
  webpack: override(
    (config) => {
      config.output.library = `${name}-[name]`;
      config.output.libraryTarget = 'umd';
      config.output.jsonpFunction = `webpackJsonp_${name}`;
      config.output.globalObject = 'window';
      // 主要代码
      config.output.publicPath = NODE_ENV === 'production' ? `${REACT_APP_ROUTER_PATH}/` : '';
       // 主要代码
      return config;
    },

    fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true,
    }),

    addLessLoader({
      lessOptions: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#304FFE',
          'success-color': '#00C853',
          'warning-color': '#FFA000',
          'error-color': '#F44336',
          '@ant-prefix': 'os-monitoring-platform',
        },
      },
    }),
  ),

  devServer: overrideDevServer(
    (config) => {
      config.open = false;
      config.hot = false;
      config.headers = { 'Access-Control-Allow-Origin': '*' };
      return config;
    },
    watchAll(),
  ),

};

package.json的设置

package.json 增加如下配：

"homepage": ".",

nginx的配置

server {
    listen       80;
    server_name  localhost;

    location ~* /favicon.ico$ {
        rewrite ".*/(.*)" "/$1" break;
        root /usr/share/nginx/html/;
    }

    location ~* /env.js$ {
        rewrite ".*/config/(.*)" "/config/$1" break;
        root /usr/share/nginx/html/;
    }

    location ~* /menu.json$ {
            rewrite ".*/(.*)" "/$1" break;
            root /usr/share/nginx/html/;
    }

    location ~* /static/.*\.(.*)$ {
        rewrite ".*/static/(.*)" "/static/$1" break;
        root /usr/share/nginx/html/;
    }

    location ~* /images/.*\.(.*)$ {
        rewrite ".*/images/(.*)" "/images/$1" break;
        root /usr/share/nginx/html/;
    }

    location / {
        rewrite .* /index.html break;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

主应用注册子应用的配置

这个真的要大写加粗的注意事项，那就是斜杆！！子应用的entry配置如果是在开发环境下，你可以是//localhost:3000或者是http://localhost:3000，但是到生产环境中，比如entry配置必须是完整的二级目录路径后面加斜杆！！！不然就会404。

所以我在主应用中把子应用注册配置抽取出来，通过区分生产和开发环境对其进行赋值。

microConfig.ts

import config from 'config/index';
// 微应用注册列表
const microList = [
  {
    title: 'react',
    name: 'react',
    entry: config.micro_react,
    container: '#Micro',
    activeRule: '/monitoringPlatform',
  },
  {
     title: 'vue',
     name: 'vue',
     entry: config.micro_vue,
     container: '#Micro',
     activeRule: '/app-vue',
   },
];
export default microList;

大概就是这些配置吧。

参考资料

qiankun如何部署