vue-pdf打包后报worker.js文件404

在爱里落单

已于 2023-02-04 17:01:44 修改

阅读量1.5k

点赞数 1

文章标签： vue.js javascript 前端

于 2022-11-18 13:39:39 首次发布

本文链接：https://blog.csdn.net/m0_52965469/article/details/127919739

版权

关于使用vue-pdf打包之后控制台报worker.js 404的问题进行解决

修改依赖文件打包后worker.js会被打包进vendor文件

node_modules/vue-pdf/src/vuePdfNoSss.vue

<style src="./annotationLayer.css"></style>
<script>
    import componentFactory from './componentFactory.js'
    import PdfjsWorker from 'pdfjs-dist/build/pdf.worker.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');需注释掉
            PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker();
        }
        var component = componentFactory(pdfjsWrapper(PDFJS));
    } else {
        var component = componentFactory({});
    }
    export default component;
</script>

在build/webpack.base.conf.js文件里增加worker.js配置

vue-cli2

{
    test: /\.worker\.js$/,
    loader: 'worker-loader',
    options: {
        inline: true,
        fallback: false
    }
},

vue-cli3

chainWebpack: (config) => {
    // 处理vue-pdf打包文件404
    config.module
    .rule('worker')
    .test(/\.worker\.js$/)
    .use('worker-loader').loader('worker-loader')
    .options({
        inline: true,
        fallback: false,
    }).end();
 }