vue2接入qiankun / iframe自适应高度

先占坑后续补充别的

vue2接入qiankun

官方网址： https://qiankun.umijs.org/zh/guide/

good教程附带github https://github.com/taosin/micro-front-vue （主要是能运行） https://juejin.cn/post/6917848537686507533#heading-1

需要注意：

（1）主应用写了默认是1，如果你访问的是2 3 访问失败会自动调回1

// 设置默认子应用,与 genActiveRule中的参数保持一致
setDefaultMountApp("/app1");

（2）不用设置在主应用同级别目录下，可以用localhost也可以用代理域名，也可以是不同服务器只要能访问到就可以。

自己踩坑：

（1）主要是用的vue2，没有vue.config.js

新建 vue.config.js配了半天不生效，原来vue2还是用webpack.dev.config.js

（2）主要解决的是跨域问题，在webpack.dev.config.js 里配devServer就ok

headers: {
      'Access-Control-Allow-Origin': '*',
},

（3）按照官方的文档如果访问不了就之间把${packageName} 改成固定的，也ok，注意output要写在外面，不在devServer里

output: {
    library: `vue-test`,
    libraryTarget: 'umd', // 把微应用打包成 umd 库格式
    jsonpFunction: `webpackJsonp_vue-test`,
},

（4）主要来说就是上面两个webpack配置

还有main.js 全换掉为了识别，qiankun模式

最后就是public-path.js ，不复杂，踩坑再补充

histroy模式这种， main.js里重写的时候已经定义好了~

（5）最后就是package-json里面的名字要统一

心理活动：

vue.config.js端口配错-》不生效-》完全不生效

原来是因为就在webpack.dev.config.js 在这里配才可以这样才算大概是入门了吧

相比的下前面都在瞎搞不知道往哪使劲了

然后用webpack 里的output 什么不认得

那找找webpack4文档里应该怎么写

emmmmmm 4 5 都有 emmmm

发现不能写在devServer里要在外面就认识了

真坑啊

！！！！泪目这样做即使是vue2也成功了 vue2完全ok。。

-----------------------------------------------

然后。。。。这边成功之后往里接又不成功甚至页面都显示不了了

而且发现之前成功的vue2 router也显示不了路由的内容。。。

iframe自适应高度

参见 https://juejin.cn/post/6977194597915033607

为什么需要使用iframe自适应高度呢？其实就是为了美观，要不然iframe和窗口长短大小不一，看起来总是不那么舒服，特别是对于我们这些编程的来说，如鲠在喉的感觉。

首先设置样式

body{margin:0; padding:0;}
复制代码

如果不设置body的margin和padding为0的话，页面上下左右会出现空白。

html代码如下

<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" frameborder="0"></iframe>
复制代码

下面就是今天小编写的时候遇到的问题，考虑到有些朋友可能没怎么用jquery就直接用js吧。

方法一

var ifm= document.getElementById("myiframe");

ifm.height=document.documentElement.clientHeight;
复制代码

这个方法可以达到让iframe自适应高度的效果，但是如果你将窗口放大或缩小效果就不出来了，也就是本文开头讲的。需要再次刷新，那就不属于自适应了。

那么问题来了，需要解决当窗口改变大小的时候执行js事件，以让iframe自适就高度。那么就需要将相关的代码写成函数，并且给iframe加上onLoad="changeFrameHeight()"，也就是下面的方法二了。

方法二

<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" οnlοad="changeFrameHeight()" frameborder="0"></iframe>
复制代码

js代码也得跟着改

function changeFrameHeight(){
    var ifm= document.getElementById("iframepage"); 
    ifm.height=document.documentElement.clientHeight;

}

window.οnresize=function(){  
     changeFrameHeight();  

} 
复制代码

window.onresize的作用就是当窗口大小改变的时候会触发这个事件。

所以，使用方法二就可以完美的、真正的让iframe自适应高度了，试试看吧，并且兼容多种浏览器。

作者：刺心疯
链接：https://juejin.cn/post/6977194597915033607