qiankun+vue は vue-pdf の落とし穴に適応します

vue プロジェクトのオンラインプレビュー pdf は vue-pdf で完全に解決できますが、qiankun マイクロフロントエンドを追加すると、巨大な穴になります。vue-pdf 導入後、ワーカーを読み込めない
エラー（非同期コンポーネントのデフォルトの解決に失敗しました:securityerror:failed to construction'worker':script at xxxx.worker.js xannot be accessed fromorigin 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 を通じて通常どおりアクセスできます
—————————————
著作権表示: この記事は CSDN ブロガー「Jun Liangye」によるオリジナルの記事であり、CC 4.0 BY-SA の著作権に従います。転載する場合は、元のソースリンクとこの声明を添付してください。
元のリンク: https://blog.csdn.net/ygxyvip/article/details/119739377

qiankun+vue は vue-pdf の落とし穴に適応します

おすすめ