qiankun+vue 适配vue-pdf踩坑

vue项目线上预览pdf可用vue-pdf完美解决,可是加上qiankun微前端后就变成巨坑了。
引入vue-pdf后,前台直接报错加载不了worker(failed to resolve async component default:securityerror:failed to construct‘worker’:script at xxxx.worker.js xannot be accessed from origin xxx ),如果直接访问单个项目则可以正常使用,结合网上多部分资料才得以解决,方法如下:

//找到vue-pdf的依赖包下的vuePdfNoSss.vue
<style src="./annotationLayer.css"></style>
<script>
	import componentFactory from './componentFactory.js'
	if ( process.env.VUE_ENV !== 'server' ) {
		var pdfjsWrapper = require('./pdfjsWrapper.js').default;
		var PDFJS = require('pdfjs-dist/es5/build/pdf.js');
		if ( typeof window !== 'undefined' && 'Worker' in window && navigator.appVersion.indexOf('MSIE 10') === -1 ) {
            // 注释原本的引入方法
			// var PdfjsWorker = require('worker-loader!pdfjs-dist/es5/build/pdf.worker.js');
			  var PdfjsWorker=require('pdfjs-dist/es5/build/pdf.worker.js');
			PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker();
		}
		var component = componentFactory(pdfjsWrapper(PDFJS));
	} else {
		var component = componentFactory({});
	}
	export default component;
</script>

修改项目的配置文件vue.config.js

chainWebpack: (config) => {
    config.module
      .rule('worker')
      .test(/\.worker\.js$/)
      .use('worker-loader').loader('worker-loader')
      .options({
        inline: true,
        fallback: false
      }).end();
  }

重启项目即可通过qiankun正常访问

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
vue-element-admin qiankun是将vue-element-admin框架与qiankun微前端框架相结合的方案。 vue-element-admin是一个基于Vue.js和Element UI的前端框架,它提供了一套完整的后台管理系统解决方案,包括登录、权限管理、数据展示等功能。它使用了Vue的单文件组件的开发方式,使得代码结构清晰,并且提供了丰富的组件和插件,大大加快了开发速度。同时,它还使用了Element UI组件库,样式美观且易于使用。 而qiankun是一个基于微前端架构的开源框架,能够帮助我们将多个独立的前端应用整合到一个统一的页面中。它具有独立性、解耦性和可复用性等特点,可以将不同的前端应用打包成独立的子应用,再通过qiankun的主应用进行管理和展示。 将vue-element-admin与qiankun相结合,可以实现在一个页面中同时展示多个vue-element-admin的实例。这样做的好处是可以将不同模块的前端开发团队独立进行开发和维护,提高开发效率和代码的复用性,同时能够实现整体页面的动态切换和加载,提升用户体验。在使用过程中,qiankun提供了一些API和生命周期钩子函数,方便我们进行子应用之间的通信和数据共享。 总之,vue-element-admin qiankun是将两个优秀的前端框架相结合,能够提供更强大的前端开发和管理能力,可以应对更加复杂的项目需求,提升开发效率和用户体验。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值