这个错误是因为 html-docx-js 库在最新版本中使用了 Node.js 环境特有的 __dirname 变量，但在浏览器环境下这个变量不存在。以下是完整解决方案：

原因分析

问题根源：

html-docx-js 的最新版本（>=1.0.0）适配了 Node.js 环境
浏览器环境不存在 __dirname（这是 Node.js 的文件路径变量）
错误触发场景：

import htmlDocx from 'html-docx-js';
// 使用时抛错 ReferenceError: __dirname is not defined

解决方案（3种方法）

方法1：使用旧版（推荐）

安装 纯浏览器兼容的旧版本（0.3.x）：

npm uninstall html-docx-js
npm install html-docx-js@0.3.1

// 直接使用（无需修改代码）
import htmlDocx from 'html-docx-js';
const blob = htmlDocx.asBlob(html);

方法2：浏览器环境Polyfill

在入口文件（如 main.js）添加全局变量：

// 解决 html-docx-js 的 __dirname 问题
if (typeof window !== 'undefined') {
  window.__dirname = '/';
}

然后正常使用库：

import htmlDocx from 'html-docx-js';
const blob = htmlDocx.asBlob(html);

方法3：使用CDN（绕过模块系统）

<!-- 在 index.html 中直接引入 -->
<script src="https://cdn.jsdelivr.net/npm/html-docx-js@0.3.1/dist/html-docx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>

// Vue组件中使用
methods: {
  exportWord() {
    const blob = window.htmlDocx.asBlob(this.htmlContent);
    window.saveAs(blob, 'document.docx');
  }
}

终极建议：升级到现代方案

推荐改用功能更强大的 docx 库：

npm install docx file-saver

import { Document, Paragraph, Packer } from "docx";
import { saveAs } from "file-saver";
const doc = new Document({
  sections: [{
    children: [new Paragraph({ text: "Hello World" })]
  }]
});
const blob = await Packer.toBlob(doc);
saveAs(blob, "document.docx");

版本兼容性对照表

建议优先考虑使用 docx 库或回退到 html-docx-js@0.3.1，这两种方案最稳定可靠。