qiankun+vue 适配vue-pdf踩坑_failed to resolve async component default: securit-程序员宅基地

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正常访问

本文链接：https://blog.csdn.net/ygxyvip/article/details/119739377

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

摩斯密码_摩斯密码是通用的吗-程序员宅基地

文章浏览阅读1.6k次。摩斯密码_摩斯密码是通用的吗

物联网架构-程序员宅基地

文章浏览阅读797次，点赞13次，收藏18次。物联网架构。

已安装对应模块，但报无法找到模块“XXX”的声明文件的解决方案_找不到模块“qs”或其相应的类型声明-程序员宅基地

文章浏览阅读1.7k次。在一次做项目的时候，我封装一个axios的文件，想引入qs组件，因为axios已经自带qs组件了，所以直接。好了，工作忙，不吹了，直接在src文件目录下创建一个 shime-vue.d.ts文件，在里面写入。但是，它居然给我报了如下的提示（这张图片是我写博客的时候找的类似的一张图片，当成qs就好）保存，就可以了，qs可以正常引入了，不会再报找不到模块了。_找不到模块“qs”或其相应的类型声明

C# 静态代码块（静态构造函数）_java static块 c#-程序员宅基地

文章浏览阅读1.2w次。本来以为是和java一样写法。结果找了半天也没找到。原来有静态构造函数一样的功能。class SimpleClass{ // Static constructor static SimpleClass() { //... }}静态构造函数具有以下特点：静态构造函数既没有访问修饰符，也没有参数_java static块 c#

cad如何多选对象_CAD熟练这个shift的快捷键可以让你画图速度飞起-程序员宅基地

文章浏览阅读8.3k次。cad也疯狂cad快捷键对于每个设计师来说都是不可缺少的一部分，必须要一步一个脚印踏踏实实把基础打好，而熟练一些常用的快捷键，可以让你事半功倍。例如ctrl+c、ctrl+v、ctrl+shift+c、ctrl+shift+v实用的组合快捷键还很多，今天小编和大家分享一个很实用但很容易被大家忽略SHIFT键在CAD中的使用技巧。一、首先是最常见的用 shift键添加到选择集注意这里是不勾选时累加选..._cad多选快捷键

4键电子手表说明书_4键sport电子表使用说明书，按START键可循环选择12/24小时显示格式...-程序员宅基地

文章浏览阅读2.1w次，点赞3次，收藏4次。电子表使用说明书1 、正常时间模式：正常时间画面显示时、分、秒、星期。1.1 按START键显示日期。1.2 按RESET键显示每日闹铃时间。1.3 按MODE进入跑秒模式。1.4 按LIGHT键灯亮3秒。1.5 按RESET+START键打开/关闭每日闹铃，相应的图标显示/消失;按住两键则发出bibi的响声。1.6 按RESET+MODE键可打开/关闭整点报时(星期全显示为打开，反之则为关闭)。..._sport watch手表说明书图解

随便推点

MySQL开发技巧 - 分页和索引_本关任务:能分页读取表中数据,针对大数据量进行简单优化。-程序员宅基地

文章浏览阅读2.6k次，点赞2次，收藏3次。第1关：MySQL 分页查询本关任务：能分页读取表中数据，针对大数据量进行简单优化。USE Products;#请在此处添加实现代码########## Begin ###########1.分页查询select prod_id from products limit 5,5;#2.用子查询优化分页查询语句select prod_id from products where prod_id >=(select prod_id from products limit 10,1) l_本关任务:能分页读取表中数据,针对大数据量进行简单优化。