Vue-pdf打包线上控制台work.js404,pdf线上无法预览,本地正常

引言

维护公司之前的一个项目,使用了vue-pdf插件,本地效果正常,打包线上之后控制台提示一个work.js资源引用404

问题已解决,下面介绍埋坑的几个要点位置

.vue组件内部是这样引入的

tempalte模板部分:

 


script部分:

这样使用在本地是没有问题的,可以预览,但是打包后预览404,我们需要改动一下vue-pdf插件的配置

首先在你的node_modules依赖里,找到如下文件夹的文件

Vue-pdf打包线上控制台work.js404,pdf线上无法预览,本地正常_第1张图片

更改里面的内容,

Vue-pdf打包线上控制台work.js404,pdf线上无法预览,本地正常_第2张图片

 

主要更改的地方有两处,第一处框起来的部分是新增内容,第二处框起来的是修改部分,把它注释掉就行了。

然后在vue项目的配置文件config.js添加内部webpack配置

chainWebpack: (config) => {
    .... 

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

}

,这样打包的时候,你的vuepdf就不会打包workjs404了。

当然,还有其它方式,网上看到有的网友博客中提到work.js404的原因是文件路径问题,将此文件放入webapp项目文件夹的static静态文件夹目录下面即可,不过我没有尝试过,所以不是很清楚,这里的方式是我已经在实际项目中处理解决了的,希望对你有帮助.

 

 

 

你可能感兴趣的:(#,Vue2,vue,pdf,vue,pdf预览,Vuepdf打包404)