引言

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

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

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

tempalte模板部分：
<tempalte>
 <pdf :src="pdfUrl" ref="pdf"></pdf>
</tempalte>

script部分：
<script>
import pdf from 'vue-pdf';
export default {
  components: {
    pdf,
  },
  .....
}
</script>

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

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

更改里面的内容，

 

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

然后在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静态文件夹目录下面即可，不过我没有尝试过，所以不是很清楚，这里的方式是我已经在实际项目中处理解决了的，希望对你有帮助.