Project scenario:

The front end realizes the pdf Online preview function, and the pdf returned in the later section is in the form of file stream

Problem Description:

The front end has realized the pdf Online preview function through Vue pdf, and the local test has passed. However, when it is deployed in the test environment after being packaged by Jenkins, it is found that the pdf Online preview function is invalid, the white screen is displayed, the content cannot be displayed normally, and the console report lacks worker.js 404.

report errors: GET http://XXX.XXX.XXX.com:8090/c52a93e....worker.js 404(Not Found) 

      👇 For how to realize pdf Online preview function, please refer to another article of mine

vue development diary ｜ using vue pdf to solve the problem of displaying pdf in file stream_ Amateur dalina's blog - CSDN blog vue pdf file stream pagination displayhttps://blog.csdn.net/qq_43292438/article/details/121380623?spm=1001.2014.3001.5501

Cause analysis:

After analysis, the main reason for the lack of worker.js is that the local package is worker.js, and the default generated path is in the dist root directory. When I package the test environment, I only take the static file in the dist directory, resulting in the generated worker.js file not being typed in. Therefore, the above problems occur.

    For patch package patches, please refer to the following bloggers 👇

vue PDF problem solving and patch package introduction - brief book problem background vue uses vue PDF to package and preview the error hash+worker.js path is wrong 404 solution modify node_modules depends on and installs patch package, which will https://www.jianshu.com/p/d1887e02f8d6

Solution:  

There are two ideas. One is to directly modify the path of jenkins packaging and replace the original dist/ststic with dist file; Second, modify node_modules relies on and installs the patch package, submits the generated patch package to gitlab, and needs to distribute the full version, so that the path of worker.js can be automatically modified to the dist/static directory when packaging. The second one is mainly adopted this time. Due to project reasons, using the first one will lead to disorderly storage of documents.

1. Enter the directory node_ Modules / worker loader / dist / index.js

const filename = _loaderUtils2.default.interpolateName(this, options.name || '[hash].worker.js', {}

Amend to read:

const filename = _loaderUtils2.default.interpolateName(this, options.name ||'ststic/js/[hash].worker.js', {}

2. Install patch package

npm i patch-package 

3. Create patch

Run the following command

npx patch-package worker-loader 

After running, a file named worker loader + 2.0.0.patch will be created in the patches directory under the root directory of the project. Then add the following code to automatically repair the node during packaging_ Modules / worker loader / dist / index.js. Finally, after submitting the patch file, you can apply the patch later.

diff --git a/node_modules/worker-loader/dist/index.js b/node_modules/worker-loader/dist/index.js
index 7adb3b7..f0a15d9 100644
--- a/node_modules/worker-loader/dist/index.js
+++ b/node_modules/worker-loader/dist/index.js
@@ -67,7 +67,7 @@ function pitch(request) {
 
   const cb = this.async();
 
-  const filename = _loaderUtils2.default.interpolateName(this, options.name || '[hash].worker.js', {
+  const filename = _loaderUtils2.default.interpolateName(this, options.name || 'static/js/[hash].worker.js', {
     context: options.context || this.rootContext || this.options.context,
     regExp: options.regExp
   });

4. Add in the scripts of package.json

"scripts": {
 "postinstall": "patch-package"
}

5. When the npm install command is executed later, the dependent packages will be patched automatically