The online preview pdf of the vue project can be perfectly solved by vue-pdf, but after adding the qiankun micro front end, it becomes a huge pit.
After introducing vue-pdf, the front desk directly reported an error that the worker could not be loaded (failed to resolve async component default:securityerror:failed to construct'worker':script at xxxx.worker.js xannot be accessed from origin xxx). If a single project is directly accessed, It can be used normally and can be solved by combining multiple parts of information on the Internet. The method is as follows:
//找到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>
Modify the project’s configuration file vue.config.js
chainWebpack: (config) => {
config.module
.rule('worker')
.test(/\.worker\.js$/)
.use('worker-loader').loader('worker-loader')
.options({
inline: true,
fallback: false
}).end();
}
Restart the project and you can access it normally through qiankun
——————————————
Copyright statement: This article is an original article by CSDN blogger “Jun Liangye” and follows the CC 4.0 BY-SA copyright agreement. Please attach the original source link and this statement when reprinting.
Original link: https://blog.csdn.net/ygxyvip/article/details/119739377