解决vue使用pdfdist-mergeofd插件时报错polyfills

pdfdist-mergeofd

该插件主要是为了解决pdf-js和ofd-js共同使用时产生的依赖冲突问题，具体可看这位博主的文章同时使用ofdjs和pdfjs遇到的问题，和解决方法——懒加载

首先看下报错信息

ERROR in ./node_modules/.pnpm/pdfdist-mergeofd@2.2.228_webpack@5.95.0/node_modules/pdfdist-mergeofd/build/pdf.js 19510:14-28 Module not found: Error: Can't resolve 'url' in 'xxx\node_modules.pnpm\pdfdist-mergeofd@2.2.228_webpack@5.95.0\node_modules\pdfdist-mergeofd\build'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }' - install 'url' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "url": false } @ ./node_modules/.pnpm/babel-loader@8.4.1_@babel+core@7.25.8_webpack@5.95.0/node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/.pnpm/@vue+cli-service@5.0.8_prettier@2.8.8_sass-loader@12.6.0_vue-template-compiler@2.6.14_vue@2.6.14/node_modules/@vue/cli-service/lib/config/vue-loader-v15-resolve-compat/vue-loader.js??vue-loader-options!./src/views/signature/sign/index.vue?vue&type=script&lang=js 21:12-39 @ ./src/views/signature/sign/index.vue?vue&type=script&lang=js 1:0-437 1:453-456 1:458-892 1:458-892 @ ./src/views/signature/sign/index.vue 2:0-56 3:0-51 3:0-51 10:2-8 @ ./src/views/index.js 228:11-84 @ ./src/views/remoteIndex.js 1:0-43 @ container entry ./views[0]

webpack compiled with 1 error

报错分析

这个错误是因为 Webpack 5 不再默认包含 Node.js 核心模块的 polyfills，导致 url 模块无法解析。为了解决这个问题，需要在 vue.config.js 中配置 resolve.fallback 来提供 url 模块的 polyfill。

解决办法

先在命令行输入npm install url安装url模块，然后修改vue.config.js文件，添加resolve.rollback

//vue.config.js中添加resolve.rollback
module.exports = {
  configureWebpack: {
    resolve: {
    	//这个配置项允许在 Webpack 中为缺失的模块提供一个回退路径。
        fallback: {
          //这指定了 url 模块的路径。
          url: require.resolve('url/'),
          //这指定了 path 模块的路径
          path: require.resolve('path-browserify'),
          //如果不需要 fs 模块，可以设置为 false。
          fs: false,
          http: false,
          https: false,
          zlib: false
        }
      }
  }
};