qiankunjs微前端探索

一. 主应用

1、container 必须和元素上定义的id字段一样

2、主应用需安装qiankunjs 微应用不需要

npm i qiankun

二、微应用

1、暂时不支持vite项目，使用vue3+webpack 2、访问微应用跨域问题：

（1）vue.config.js 本地服务配置devserve配置

devServer: {
    port: 7001, // 启动项目时的端口号
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },

（2）nginx配置响应头

location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null; 
         if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
    }
     #后台接口配置
    location ~ {
		   if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
    }

三、应用间通讯

1、

其余正在慢慢探索中...