.babelrc

@@ -9,7 +9,7 @@
           "chrome": "67",
           "safari": "11.1"
         },
-        "corejs": "2.0",
+        "corejs": 2,
         "useBuiltIns": "usage" // @babel/polyfill 配置：usage 按需加载 ECMAscript 规范库
       }
     ]

package.json

@@ -18,7 +18,6 @@
   "author": "Wayne (371377785@qq.com)",
   "repository": "https://github.com/DingRui12138/vue-pdf-viewer",
   "scripts": {
-    "prepare": "webpack build",
     "test": "webpack -v",
     "build": "webpack build --progress",
     "serve": "webpack serve --config webpack.dev.config.js --hot",
@@ -26,8 +25,7 @@
     "lint:fix": "eslint src/** --fix"
   },
   "dependencies": {
-    "pdfjs-dist": "2.12.313",
-    "sass": "^1.89.2"
+    "pdfjs-dist": "2.12.313"
   },
   "devDependencies": {
     "@babel/core": "^7.14.2",
@@ -44,13 +42,16 @@
     "eslint-plugin-vue": "^7.10.0",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.3.2",
+    "node-sass": "^6.0.1",
     "prettier": "^2.3.0",
-    "sass-loader": "^16.0",
+    "sass-loader": "^12.3.0",
     "strip-ansi": "^7.0.1",
     "style-loader": "^3.3.1",
+    "uglifyjs-webpack-plugin": "^2.2.0",
     "url-loader": "^4.1.1",
     "vue": "^2.6.12",
     "vue-loader": "^15.9.7",
+    "vue-loader-next": "npm:vue-loader@^16.2.0",
     "vue-style-loader": "^4.1.3",
     "vue-template-compiler": "^2.6.14",
     "webpack": "5",

src/components/RotateWrapper/RotateWrapper.vue

@@ -94,5 +94,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use './RotateWrapper.scss';
+@import './RotateWrapper.scss';
 </style>

src/components/Viewer/Viewer.vue

@@ -209,10 +209,8 @@ export default {
     this.$refs.iframe.appendStyle(this.$options.rotateWrapperStyle)
     // TODO: element resize replace window resize with Observe
     this.handleResize = throttle(() => {
-    try{
       this.viewportHeight = this.$refs.container.clientHeight
       this.viewportWidth = this.$refs.viewerScroller.clientWidth
-    }catch(e){}
     }, 100)
 
     window.addEventListener('resize', this.handleResize)

webpack.config.js

@@ -1,8 +1,8 @@
 /* eslint-disable no-undef */
 
-// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 const { VueLoaderPlugin: Vue2LoaderPlugin } = require('vue-loader')
-// const { VueLoaderPlugin: Vue3LoaderPlugin } = require('vue-loader-next')
+const { VueLoaderPlugin: Vue3LoaderPlugin } = require('vue-loader-next')
 
 const baseConfig = {
   mode: 'production',
@@ -24,7 +24,6 @@ const baseConfig = {
                   chrome: '67',
                   safari: '11.1',
                 },
-                corejs: '2.0',
                 useBuiltIns: 'usage',
               },
             ],
@@ -71,11 +70,11 @@ const baseConfig = {
     ],
   },
   optimization: {
-    // minimizer: [
-    //   new UglifyJsPlugin({
-    //     parallel: true,
-    //   }),
-    // ],
+    minimizer: [
+      new UglifyJsPlugin({
+        parallel: true,
+      }),
+    ],
   },
   externals: {
     vue: 'vue',
@@ -97,15 +96,15 @@ module.exports = [
     },
     plugins: [new Vue2LoaderPlugin()],
   },
-  // {
-  //   ...baseConfig,
-  //   output: {
-  //     filename: 'vue3-pdf-viewer.js',
-  //     library: {
-  //       name: 'pdf-viewer-vue',
-  //       type: 'umd',
-  //     },
-  //   },
-  //   plugins: [new Vue3LoaderPlugin()],
-  // },
+  {
+    ...baseConfig,
+    output: {
+      filename: 'vue3-pdf-viewer.js',
+      library: {
+        name: 'pdf-viewer-vue',
+        type: 'umd',
+      },
+    },
+    plugins: [new Vue3LoaderPlugin()],
+  },
 ]