微前端qiankun框架vue使用

任意 js 框架均可使用。微应用接入像使用接入一个 iframe 系统一样简单，但实际不是 iframe,几乎包含所有构建微前端系统时所需要的基本能力，如 样式隔离、js 沙箱、预加载等。

接下来开始使用吧

主应用

引入qiankun 框架

npm install qiankun -S

在main.js文件中引入

import {registerMicroApps,start} from 'qiankun'
const apps=[
  {
    name:'qiankun_login',//应用名
    entry:'//localhost:10000',//端口号
    container:'#qiankun_login',//所展示位置
    activeRule:'/qiankun_login'//激活规则
  },
  {
    name:'qiankun_config',
    entry:'//localhost:20000',
    container:'#qiankun_config',
    activeRule:'/qiankun_config'
  }
]
registerMicroApps(apps)//注册应用
start();//开启应用

页面详情

  <el-menu :router="true" mode="horizontal">
      <el-menu-item index="/hello">home</el-menu-item>
      <el-menu-item index="/qiankun_login">登录页</el-menu-item>
      <el-menu-item index="/qiankun_config">基本设置</el-menu-item>
    </el-menu>
    <div>
      <router-view></router-view>
    <div id="qiankun_login"></div>
    <div id="qiankun_config"></div>
    </div>

微应用

（不需要引入qiankun）

配置路由规则

const router=new VueRouter({
    mode:'history',
    base:'/qiankun_login',
    routes
});

配置main.js

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router/router'
​
  Vue.config.productionTip = false
​
  let instance=null
  function render(){
    instance=new Vue({
    router,
    render: h => h(App),
  }).$mount('#app')
  }
  // 独立运行时
  if (!window.__POWERED_BY_QIANKUN__) {
    render();
  }
  export async function bootstrap(){
    //实例创建前
  }
  export async function mount(){
    render()//创建实例
  }
  export async function unmount(){
    instance.$destroy()//销毁实例
  }

创建vue.config.js文件

module.exports={
    devServer:{
        //监听端口
        port:10000,//端口需要和主应用的中配置的端口一致
        disableHostCheck: true,
        // 配置跨域请求头，解决开发环境的跨域问题
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },
    configureWebpack:{
        output: {
            // 微应用的包名，这里与主应用中注册的微应用名称一致
            library: "qiankun_login",
            // 将你的 library 暴露为所有的模块定义下都可运行的方式
            libraryTarget: 'umd',
​
        },
    }
​
}