qiankun.js微前端改造注意事项

海天酱油_htSauce
1,010 阅读4分钟

1、关于文件导入的问题（cdn路径）

建议能使用npm方式导入的不要在index.html中去额外的导入了。不谈性能问题，如果上微前端，那么你很可能无法完全掌控全局变量

2、关于静态资源字体等404问题

1、首先能使用域名访问的全部改为域名访问，这里注意需要根据开发还是生产环境进行区分

2、然后关于字体方面，qiankun官方有提供方式。地址：qiankun.umijs.org/zh/faq#微应用打…

注意事项：独立运行的时候字体404，是因为根据qiankun进行改造了，去掉就恢复了。挺麻烦的

3、容器需要提前布局，不是官方自动创建的

可能是我太傻，一开始一直提示容器不存在(也就是绑定id的div)，后来翻看别人的代码才知道，是需要提前写好html的

4、关于接口404的问题

和静态资源是类似的问题，需要改为域名访问。

5、接口部署的时候的提醒

部署到nginx上面的时候可以是多个nginx，也可以是一个nginx，但是需要注意跨域问题。我觉得放一个nginx上面比较省事

6、贴一段自己改造好的nginx配置

worker_processes  1;
events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       3000;
        server_name  localhost;
	#网页配置
        location /main {
            root   html;
            index  index.html index.htm;
	    try_files  $uri $uri/ /main/index.html;
        }
	location /dm {
	    root   html;
	    index  index.html index.htm;
	    try_files $uri $uri/ /dm/index.html;
	}
	location /samescreen {
	    root   html;
	    index  index.html index.htm;
	    try_files $uri $uri/ /samescreen/index.html;
	}

	#接口代理
	location /organization-api {
		proxy_pass	https://172.16.103.12/organization-api;
		proxy_set_header Host $host;
        	proxy_set_header X-Real-IP $remote_addr;
        	proxy_set_header REMOTE-HOST $remote_addr;
        	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	}
	location /user-api {
		proxy_pass	https://172.16.103.12/user-api;
		proxy_set_header Host $host;
        	proxy_set_header X-Real-IP $remote_addr;
        	proxy_set_header REMOTE-HOST $remote_addr;
        	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	}
	location /robot-ss-api {
		proxy_pass	https://172.16.103.12/robot-ss-api;
		proxy_set_header Host $host;
        	proxy_set_header X-Real-IP $remote_addr;
        	proxy_set_header REMOTE-HOST $remote_addr;
        	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	}
    }

}

7、根据官方改造方式是没什么错误的，但是大家还是各种报错

这里最大的问题是你还不熟悉，除了翻下别人项目代码。还有就是你需要知道你的项目启动之后qiankun是根据什么去渲染你的项目的。

在webpack改造的时候有进行output改造，然后qiankun实际上是主要去跑，js/app.js下面的文件。所以你需要先保证你的app.js能访问

举例：

在registerMicroApps的时候需要进行配置

假如是这样的配置，主项目域名为localhost:8080

{
        name: 'samescreen',
        entry: production ? '/samescreen' : '//localhost:8001/samescreen',
        container: '#samescreen',（这个看你想把项目展示在哪里）
        activeRule: '/samescreen',
      },

那么项目app.js的访问地址就是:

开发：localhost:8080/samescreen/js/app.js

生产：/samescreen/js/app.js（我部署在一个nginx下面）

8、如何给项目增加前缀

小伙伴会发现我的项目是增加了前缀的。

1、路由增加base前缀

2、publicPath增加前缀，注意这里不能带有域名（提醒的原因是因为，vue.config下面还有静态文件的配置，这里是需要有域名的）

3、publicPath文件，或者这段代码增加

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ + 'samescreen/'
}

很多小伙伴应该就是这里出的问题

8、关于initGlobalState传递数据

1、必须子应用活跃状态才可以监听到数据变化

2、主应用的state如果数据没有正确传递到子应用除了你数据修改错误之外，就是你的页面刷新了。很容易发生在winodw.location.href使用上面，所以主应用state数据最好是做一下缓存处理

9、关于应用跳转

1、应用之间跳转可以使用window.location.href但是会刷新页面，推荐使用 history.pushState(null, '', url)

2、在子项目配置的时候需要注意路由的修改，要把路由放在render函数里面，进行new，不要直接修改。这里核心关系到子应用之间的跳转，然后路由卸载的问题

10、容器放在子路由的注意事项

新手经常发生把子路由放在子路由页面之后然后挂载子应用失败的问题

原因：

主路由在路由监听的时候没有这个子路由页面，那么对于主应用来说页面就是不存在的，自然就报错了。

所以vue2方面需要动态加载子应用的路由

vue3需要在路由上面增加:catchAll(.*)

11、主应用增加前缀

这时候其实按正常逻辑已经可以访问了，但是子应用不展示是因为主应用的路由共享给了子应用。那么子应用得到的路由就会多一个前缀，所以把主应用的路由前缀给子应用就行了。但是不需要放在publicPath里面

致谢

大概就这些吧。改过两次之后基本上都不是什么大问题了。qiankun做的确实简单好用。

avatar
文章
阅读
粉丝