qiankun 踩坑记录

已于 2022-07-18 15:39:04 修改
阅读量481 收藏
点赞数
分类专栏： 前端 文章标签： javascript
于 2022-06-23 11:19:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010792039/article/details/125423670
版权

1 乾坤框架的css沙箱只能保证子应用之间的样式不相互影响，所以开发过程中主应用应该给样式添加限制

2 无法在子应用全局变量中保存props

微应用接入指南

主应用

Main.js代码

import { createApp } from 'vue'

import App from './App.vue'

import Router from './router'

import { registerMicroApps, start, initGlobalState, setDefaultMountApp } from 'qiankun'

let apps = [

    {

        name: 'app1',

        entry:

            process.env.NODE_ENV === "development" ? '//localhost:8082/app1/' : '/app1',

        container: '#container',

        activeRule: '#/app1',

        beforeLoad: () => { },

        beforeMount: () => { },

        afterMount: () => { },

        beforeUnmount: () => { },

        afterUnmount: () => { }

    }, {

        name: 'app2',

        entry:

            process.env.NODE_ENV === "development" ? '//localhost:8081/app2/' : '/app2',

        container: '#container',

        activeRule: '#/app2',

        beforeLoad: () => { },

        beforeMount: () => { },

        afterMount: () => { },

        beforeUnmount: () => { },

        afterUnmount: () => { }

    },

];



let initQiankun = (vue) => {

    window.__POWERED_BY_QIANKUN_PARENT__ = true

    //注册微应用

    registerMicroApps(apps);

    setDefaultMountApp('#/app1')

    start();

    //初始化传给微应用的数据

    let state = {

        userId: '1232q345123',

        name: 'LiLin',

        pageName: '',

        isLogin: true

    };

    const actions = initGlobalState(state);



    // 子应用修改了state会调用此方法  state: 变更后的状态; prev 变更前的状态

    actions.onGlobalStateChange((state, prev) => {

        console.log('子应用修改了state', state, prev);

        if (!state.isLogin) {

            //TODO 重新登录

        }

    });

    actions.setGlobalState(state);

    actions.offGlobalStateChange();

    vue.config.globalProperties.$actions = actions;

}



Router.beforeEach((to, from, next) => {

    next()

})

let app = createApp(App).use(Router);

app.mount('#qiankun');

initQiankun(app);



//处理浏览器前进后退

(() => {

    window.addEventListener("popstate", function () {



        let hashHistory = sessionStorage.getItem('hashHistory');

        if (!hashHistory) hashHistory = [];

        else

            hashHistory = JSON.parse(hashHistory)



        let current = window.location.href.split('#')[1];

        if (current == 'undefined') {

            Router.replace('/')

            return;

        }

        //如果不是微应用的路由地址，不做操作

        let length = apps.filter(item => {

            return current.indexOf(item.name) == 1;

        }).length;

        if (length == 0) return;



        //如果还没有缓存，放入数组中缓存起来

        if (hashHistory.indexOf(current) == -1)

            hashHistory.push(current);

        sessionStorage.setItem('hashHistory', JSON.stringify(hashHistory));

        ///  console.log(11111, hashHistory)

    }, false)



    window.addEventListener("hashchange", function (e) {

        // console.log('hashchange')

        let hashHistory = sessionStorage.getItem('hashHistory');

        if (!hashHistory) return

        hashHistory = JSON.parse(hashHistory)

        let current = e.newURL.split('#')[1] || '';

        //如果是缓存记录中的路由地址，不做操作

        let arr = hashHistory.filter(item => {

            return item == current;

        })

        if (arr.length > 0) return;



        //查找出包含此路由地址的缓存路由，最后替换路由地址

        let temp = hashHistory.filter((item) => {

            return item.indexOf(current) != -1;

        })

        Router.replace(temp[0])

    }, false);

})()


 

Vue2脚手架项目接入

1在src目录下创建文件public-path.js，内容如下

if (window.__POWERED_BY_QIANKUN__) {

    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;

}

                         

2修改main.js文件

import './public-path';

import Vue from 'vue';

import App from './App.vue';

import router from './router/index';

import store from './store';



import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';



import request from '@/utils/request/request'

import Security from '@/utils/request/EncryptionTools/index'

import settings from '@/utils/request/settings'





Vue.use(Security.Security)

Vue.use(ElementUI);

Vue.prototype.request = request;



let instance = null;

function render (props = {}) {

    const { container } = props;



    instance = new Vue({

        router,

        store,

        render: (h) => h(App),

    }).$mount(container ? container.querySelector('#app') : '#app');

}



// 独立运行时

if (!window.__POWERED_BY_QIANKUN__) {

    render();

}



export async function bootstrap () {

    console.log('[vue] vue app bootstraped');

}

export async function mount (props) {

    console.log('[vue] props from main framework', props);

    props.onGlobalStateChange((state, prev) => {

        // state: 变更后的状态; prev 变更前的状态

        console.log(state, prev, props.setGlobalState);

    });

    render(props);

}

export async function unmount () {

    instance.$destroy();

    instance.$el.innerHTML = '';

}

主要修改：

  1. 引入public-path.js
  2. 声明并导出方法bootstrap、mount、unmount 三个方法
  3. 根据加载方式不同将生成的html节点绑定到不同的根节点上

3.修改vue.config.js配置文件

const { name } = require('./package');

const publicPath = process.env.NODE_ENV === 'production' ?

    'http://localhost:82/app2' : ``;



module.exports = {

    publicPath: '/app2/',



    devServer: {

        headers: {

            'Access-Control-Allow-Origin': '*',

        },

    },

    configureWebpack: {

        output: {

            library: `${name}-[name]`,

            libraryTarget: 'umd', // 把微应用打包成 umd 库格式

            jsonpFunction: `webpackJsonp_${name}`,

        },

    },

    chainWebpack: (config) => {

        const fontRule = config.module.rule('fonts');

        fontRule.uses.clear();

        fontRule

            .use('file-loader')

            .loader('file-loader')

            .options({

                name: 'fonts/[name].[hash:8].[ext]',

                publicPath,

            })

            .end();

        const imgRule = config.module.rule('images');

        imgRule.uses.clear();

        imgRule

            .use('file-loader')

            .loader('file-loader')

            .options({

                name: 'img/[name].[hash:8].[ext]',

                publicPath,

            })

            .end();

    },

};

说明：

  1. 地址http://localhost:82/app2为该应用部署后的访问地址，主要是为了将资源文件中的相对地址替换成绝对地址
  2. app2这个名称必须是唯一的，为了解决加载微应用时的跨域问题
  3. 设置开发模式下允许跨域访问，方便开发环境调试

4.修改router.js

       import Vue from 'vue';

import VueRouter from 'vue-router';

import Home from '../views/Home.vue';



Vue.use(VueRouter);



const routes = [

    {

        path: '',

        name: 'Home',

        component: Home

    },

    {

        path: '/',

        name: 'Home',

        component: Home

    },

];



if (window.__POWERED_BY_QIANKUN__) {

    let prefix = '/app2' // 为主应用的activeRule

    routes.map(item => {

        item.path = prefix + item.path;

    });

}



const router = new VueRouter({

    mode: 'hash',

    routes

});



if (window.__POWERED_BY_QIANKUN__) {

    router.beforeEach((to, from, next) => {

        if (!to.path.includes('/app2')) { // /workbench为主应用的activeRule

            next({ path: prefix + to.path })

        } else { next() }

    })

}



export default router;

Vue3脚手架项目接入

1在src目录下创建文件public-path.js，内容如下

if (window.__POWERED_BY_QIANKUN__) {

    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;

}

                         

2修改main.js文件/* eslint-disable */


/* eslint-disable */

// @ts-nocheck

import './public-path.ts'

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

/**

* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法

*/

let app;

function render (props = {}) {

    const { container } = props;



    app = createApp(App);

    app.config.globalProperties.$props = props;

    app.use(router).mount(container ? container.querySelector('#app') : '#app')

    //app.config.globalProperties.$props 

    props.setGlobalState && props.setGlobalState({ pageName: '123' })

}

// 独立运行时，直接挂载应用

if (!window.__POWERED_BY_QIANKUN__) {

    render();

}

/**

* bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。

* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。

*/

export async function bootstrap () {

    console.log("VueMicroApp bootstraped");

}

/**

* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法

*/

export async function mount (props) {

    props.onGlobalStateChange((state, prev) => {

        // state: 变更后的状态; prev 变更前的状态

        console.log(state, prev, props.setGlobalState);

    });

    render(props);

}



/**

* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例

*/

export async function unmount () {

    console.log("VueMicroApp unmount");

}

主要修改：

  1. 引入public-path.js
  2. 声明并导出方法bootstrap、mount、unmount 三个方法
  3. 根据加载方式不同将生成的html节点绑定到不同的根节点上

3.修改vue.config.js配置文件

const { ReplacePath } = require('./lib/replace-path.js')

const { name } = require('./package')



const path = require('path')

const publicPath = process.env.NODE_ENV === 'production' ? 'http://localhost:82/app1/' : `/app1/`;

module.exports = {

    publicPath,

    devServer: {

        headers: {

            //允许跨域

            'Access-Control-Allow-Origin': '*',

        }

    },

    configureWebpack: {

        output: {

            // 把子应用打包成 umd 库格式

            library: `${name}-[name]`,

            libraryTarget: 'umd',

            chunkLoadingGlobal: `webpackJsonp_${name}`,

        },

        plugins: [

            new ReplacePath({})

        ]

    },

}

ReplacPath插件代码

/** 自定义的插件: 替换一个全局变量 */

const fs = require('fs')

const path = require('path')

class ReplacePath {

    apply (compiler) {

        if (process.env.NODE_ENV === 'development')

            return;

        compiler.hooks.afterEmit.tap("ReplacePath", (compilation) => {



            compilation.chunks.forEach(chunk => {

                let pathHeader = path.resolve(__dirname.replace('lib', ''), 'dist');

                chunk.files.map(fileName => {

                    if (!/.js$/.test(fileName)) return;

                    let source = fs.readFileSync(path.resolve(pathHeader, fileName), { encoding: 'utf-8' });

                    source = source.replace(/window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__/, `"${compilation.options.output.publicPath}"`);

                    fs.writeFileSync(path.resolve(pathHeader, fileName), source, { encoding: 'utf-8' });

                })

            });



        });

    }

}



module.exports = { ReplacePath };


 

  1. app1这个名称必须是唯一的，为了解决加载微应用时的跨域问题
  2. 设置开发模式下允许跨域访问，方便开发环境调试

4.修改router.js

import { createRouter, createWebHashHistory } from 'vue-router'

import TestText from '../views/test/test-text.vue'

import TestText2 from '../views/test2/test-text.vue'

import TestText3 from '../views/test3/test-text.vue'

let routes = [

    {

        path: '/',

        component: TestText

    },

    {

        path: '/page2',

        component: TestText2

    },

    {

        path: '/page3',

        component: TestText3

    },



];

const router = createRouter({ routes, history: createWebHashHistory(window.__POWERED_BY_QIANKUN__ ? '#/app1' : '') });

export default router;

Nginx部署

Nginx配置如下

worker_processes  2;

events {

    worker_connections  1024;

}


http {

   proxy_cache_path /tmp/nginxcache levels=1:2 keys_zone=app:10m max_size=10g inactive=1m use_temp_path=off;


    include       mime.types;

    default_type  application/octet-stream;

    keepalive_timeout  65;

  server{

   listen 81;

   server_name localhost;

#  gzip on;

#  gzip_min_length 1k;

#  gzip_buffers 4 16k;

  

   location  / {

      root  html/main/;  #你的项目的根目录

      index  index.html index.htm;

      autoindex on;

   }

  
   location  /app1/ {

      proxy_pass http://localhost:82/app1/;

      proxy_set_header Host $host:$server_port;

       proxy_cache app;  #开启缓存 off关闭缓存
     

      proxy_cache_valid 200 304 12h;  #表示对200 304头信息12小时过期


      proxy_cache_valid any 10m; #表示除200 304头信息10钟过期

     
      add_header Nginx-Cache "$upstream_cache_status"; 

   }
     

   location  /app2/ {

      proxy_pass http://localhost:82/app2/;

      proxy_set_header Host $host:$server_port;

       proxy_cache app;  #开启缓存 off关闭缓存

     

      proxy_cache_valid 200 304 12h;  #表示对200 304头信息12小时过期

           proxy_cache_valid any 10m; #表示除200 304头信息10钟过期
    

      add_header Nginx-Cache "$upstream_cache_status"; 

   }

   access_log  logs/k8s.log;

   error_log  logs/zhaoxin_error.log;

   charset     utf-8;   # 编码

    error_page   500 502 503 504  /50x.html;

       

  }

 
  server{

   listen 82;

     gzip on;

   gzip_min_length 1k;

   gzip_buffers 4 16k;

  

   #允许跨域请求的域，*代表所有

add_header 'Access-Control-Allow-Origin' *;

#允许带上cookie请求

add_header 'Access-Control-Allow-Credentials' 'true';

#允许请求的方法，比如 GET/POST/PUT/DELETE

add_header 'Access-Control-Allow-Methods' *;

#允许请求的header

add_header 'Access-Control-Allow-Headers' *;


   location  / {

      root  html/;  #你的项目的根目录

      index  index.html index.htm;

   }  

  }


}

​​​​​​​

  1. 基座部署的时候需要设置代理，并开启缓存（否则加载会很慢）
  2. 微应用部署的时候需要设置允许跨域访问，可以限制下资源类型，主要是当加载微应用的时候一些图片字体等资源需要跨域访问
昨天1990
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 获取位置信息方法 navigator.geolocation.getCurrentPosition 失败原因分析
昨天1990的专栏
12-11 2万+
1谷歌浏览器失败：个人认为是谷歌位置服务被封的原因 2安卓手机失败： 权限配置问题 这个必须开启手机的gps（我是这个原因，之前认为手机的位置服务是通过网络ip定位来的看来错了，shit）
html video 自定义控制栏（移动端应用）
昨天1990的专栏
01-25 8189
#box { width: 100%; height: 40px; background: #eeeeee; border-radius: 10px; box-shadow: 1px 1px 2px 2px #232; border: 1px solid #ff0000 } .play { width: 0px; height: 0px; float: left; ma
乾坤云网络验证官网源码
05-11
乾坤云网络验证--API验证-易语言源码验证-支持任意EXE成品语言软件添加网络验证而打造的网络防破验证-免费的网络验证，纯网站源码，无任何功能，喜欢的下载！
beforeRouteLeave在子组件中不生效
_NIXIAKF的博客
03-30 2971
beforeRouteLeave在子组件中不生效
解决qiankun中子应用外链文件无法获取
weixin_45389051的博客
06-27 2799
qiankun无法获取子应用js文件
vue的生命周期钩子函数 父子组件及缓存组件可以使用哪些函数
beichen3997的博客
04-21 489
近期做vue的缓存等，路由比较复杂，认识了几个新的钩子函数，在此记录下 生命周期函数 beforeCreate created beforeMount mounted beforeUpdate updated beforeRouteEnter beforeRouteLeave activated deactivated beforeDestroy destroyed 一、 组件间函数的关系 1....
vue点击浏览器的返回按钮失效_使用Vue时浏览器后退无法触发beforeRouteLeave的问题...
weixin_29050271的博客
12-23 1650
这篇文章主要介绍了解决Vue 浏览器后退无法触发beforeRouteLeave的问题,需要的朋友可以参考下现象加载第一个组件(这里的第一个意思是浏览器历史记录的第一个，后文称为 待监听组件 )时，正常跳转其他页面可以触发beforeRouteLeave。 但是 按浏览器的后退按钮监听不到该事件。解决方案目前采用比较土且不实用的解决方案。加一层组件，再router.push到 待监听组件 ，使得 ...
微前端 qiankun API
LY18483的博客
09-13 888
qiankun提供的相关api
解决基于Vite的qiankun微前端中，子应用的路由跳转出错的问题
Lea_HQ的博客
12-17 1158
在基于vite的qiankun框架的使用过程中，发现我可以通过基台应用跳转到目标子应用，但是对于这个目标子应用本身的路由却失效，提示说找不到相关地址，但是在子应用中的路由确实是注册了的。
qiankun框架技术难点
wyh666csdn的博客
01-11 1018
不需要，判断一下是否在qiankun中即可，在的话再加前缀，不在就不加。
微前端框架qiankun源码解读 -1.1 hijackers/windowListener
mango的博客
12-25 913
直接上代码： import { noop } from 'lodash'; const rawAddEventListener = window.addEventListener; const rawRemoveEventListener = window.removeEventListener; 这里先保存window的添加和移除监听的函数。 export default func...
web前端面试第一次[addEventListenr();绑定事件]
dizhang2548的博客
04-27 408
//当一个元素同时处理多个函数，这里使用按钮 //addEventListener(string类型，处理函数，boolean); <input type="button" id="btn"/>//同一个按钮btn document.getElementById("btn").addEventListener(　　　　　　//(事件因为是string类型，所有要用双引号...
华为乾坤网络云服务 产品文档（chm）
07-11
华为乾坤网络云服务 产品文档（chm）
输入法界面设计之乾坤
03-02
对于输入法这样的工具性产品来说，怎样的界面设计才是好的?输入法界面设计中又隐含着那些理念?大家一起来看一下吧：)随着百度手机输入法Android3.6版正式发布，迎来了全新第六代界面，新的界面更简洁更人性化。...
乾坤大挪移
08-27
系统转移 c盘转移 乾坤大挪移 桌面转换
html video标签全屏和安卓端点击屏幕不显示操作栏问题
昨天1990的专栏
01-23 6191
1全屏监听 document.addEventListener("webkitfullscreenchange", function (event,state) { that.video.isFullscreen = !that.video.isFullscreen;//在外部设置一个全局变量初始值赋值为false if(that.video.isFullscreen){//切
axios 请求头部添加token
昨天1990的专栏
02-15 3331
// http request拦截器 添加一个请求拦截器 axios.interceptors.request.use(function (config) { // Do something before request is sent //window.localStorage.getItem("accessToken") 获取token的value let token ...
element 封装list
昨天1990的专栏
02-19 2802
List组件 <template> <div class="m-list"> <el-table stripe :data="data" v-loading="loading" :fit='true' @row-dblclick="tableConfig.rowDblclick" @row-click="tableConfig.rowClick"...
cordova 二维码扫描
昨天1990的专栏
05-14 2453
1添加插件 cordova plugin add cordova-plugin-qrscanner 2创建html <!DOCTYPE html> <html> <head> <meta name="format-detection" content="telephone=no"> <meta name="msapplicati...
vite配置乾坤框架
最新发布
12-23
vite配置乾坤框架需要先安装vite和qiankun的相关依赖，然后在vite项目的根目录下创建一个qiankun.config.js的配置文件。在这个配置文件中，需要设置主应用和子应用的相关信息，比如子应用的名称、入口、路由等。接着在主应用的入口文件中引入qiankun的相关方法，并根据配置信息动态注册子应用。同时，还需要在子应用的入口文件中导出一个生命周期函数，用来指定子应用的挂载、卸载和激活时的操作。 除了以上的配置外，还需要注意在vite的配置文件中进行一些特殊的配置，比如设置跨域代理、打包输出路径等。最后，通过vite启动主应用和子应用的开发服务器，就可以在浏览器中进行调试和查看效果了。 总的来说，vite配置乾坤框架需要理解qiankun的相关概念和使用方法，熟悉vite的配置方式，以及对主子应用的开发和打包有一定的了解。只有将这些知识结合起来，才能够顺利地完成vite配置乾坤框架的工作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值