Vite内部服务器错误：无法解析vertx导入，文件是否存在？

问题描述 #

Vite启动时触发内部服务器错误：

[vite] 内部服务器错误：无法从"node_modules\vue3-html2pdf\node_modules\html2pdf.js\dist\include\html2pdf.es.js?v=81457e47"解析导入"vertx"。该文件是否存在？
插件：vite:import-analysis
文件：E:/code/vue/curriculum/node_modules/vue3-html2pdf/node_modules/html2pdf.js/dist/include/html2pdf.es.js?v=81457e47:1:45
1 | import * as __require_for_vite_KSDlOT from "vertx";
| ^
2 | import jsPDF from "jspdf";
3 | import html2canvas from "html2canvas";

问题根源是vue3-html2pdf依赖的html2pdf.js版本错误引入了Node.js环境的vertx模块，而前端浏览器环境不存在该模块，导致Vite的导入分析插件解析失败。

解决方案 #

方法1：用patch-package永久修复依赖文件 #

• 找到node_modules/vue3-html2pdf/node_modules/html2pdf.js/dist/include/html2pdf.es.js，删除第一行的import * as __require_for_vite_KSDlOT from "vertx";
• 安装patch-package工具：

  npm install patch-package --save-dev
  

• 在package.json的scripts字段中添加：

  "postinstall": "patch-package"
  

• 生成补丁文件：

  npx patch-package html2pdf.js
  

  后续执行npm install时，补丁会自动应用，无需重复修改原文件。

方法2：通过Vite配置忽略vertx模块 #

在vite.config.js中配置别名，将vertx指向自定义的空模块：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 先在src目录下新建empty-module.js，内容为：export default {}
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vertx': './src/empty-module.js'
    }
  }
})

也可以直接通过optimizeDeps配置排除vertx：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    exclude: ['vertx']
  }
})

方法3：升级vue3-html2pdf版本 #

检查vue3-html2pdf的最新版本，官方可能已修复该依赖问题：

npm update vue3-html2pdf

内容的提问来源于stack exchange，提问作者Tony Stark