[JavaScript知识库]前端跨应用跳转解决方案（qiankun）

一：使用框架（qiankun）

yarn add qiankun # or npm i qiankun -S

二：使用方法（主应用和微应用都使用hash）

主应用中 main.js

import { registerMicroApps, start } from 'qiankun'

//需要引入的微应用

const apps = [
  {
    name: 'pia',
    entry: 'http://微应用域名/',      //微应用的访问域名
    container: '#pia',                      //将微应用显示在此id标签内
    activeRule: 'pia/#/pia',             //用于识别当链接为http://主应用域名/pia/#/pia时，加载微应用html并显示到container中。  ——————http://微应用域名/pia此链接可以直接访问微应用  
    props: {token: localStorage.getItem('token')}       //传值给微应用
  }
]

registerMicroApps(apps, {
  beforeLoad: app => console.log('before load', app.name),
  beforeMount: [
    app => console.log('before mount', app.name)
  ]
})
start({
  prefetch: false // 取消预加载
})

微应用中
//非qiankun则直接渲染 qiankun的话多一个传值的部分

if (!window.__POWERED_BY_QIANKUN__) {
  render(); 
}
export const mount = async (props) => {
  render()
  localStorage.setItem('token', props.token)
}

//用于改变webpack的publicPath

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

config.js中的配置

module.exports = {
  webpack: (config)=>{
    config.output.library = 'pias';              //出库名称
    config.output.libraryTarget = 'umd';   //出库方式，此为固定值
    config.output.publicPath = process.env.NODE_ENV === 'production' ? 'http://xxx/pia/' : 'http://localhost:10000/';  //微应用资源的存储地址，可用于解决主应用加载微应用时，需要访问微应用地址导致的跨域问题
    return config
  },
}

问题梳理

两个前端项目由同一域名访问，通过不同的路径去区分。域名+’/’ 路径可以获取主应用html文件，域名+‘/pia’ 可以获得微应用html文件，确保当前两种方式可以获取各应用的html文件。

后端nginx部分

/pia是微应用部分的前端项目，需要去前缀以及匹配location的优先级

处理方法：

location /pia 改成 location ^~/pia/
2. ‘/’问题，注意proxy_pass 链接是否正确