vue-pdf 无法线上预览路径404

忘是亡心i 2022-11-17 05:02 527阅读 0赞

使用vue-pdf时本地可以正常预览但是打包发布测试后报worker.js文件404，目前发现有两种解决办法，第一种是修改依赖文件，这样打包后worker.js会被打包进vendor文件，导致vendor文件过大，页面加载慢；第二种就是在文件根目录建一个404的路径文件夹，把打包生成的worker.js文件放进去就可以，以下代码示例：  
**第一种，修改依赖**  
在依赖中找到此路径的文件并打开：node\_modules/vue-pdf/src/vuePdfNoSss.vue

然后修改build里的配置文件，vue-cli3以下的版本，在build/webpack.base.conf.js文件里增加worker.js配置

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

vue-cli3以上，在vue.config.js文件里添加以下代码

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

**第二种方法**就是在项目根目录建立404对应路径的文件夹将打包生成的worker.js文件放进去，例如404路径为：http://xxx.com/aaa/bbb/ccc.worker.js,那么在项目根目录创建对应路径的文件夹将文件放进去就可以啦

以上两种方法都实测可行，建议使用第二种。第一种会导致打包文件过大，影响页面加载速度，大家有更好的方法可以讨论哈