使用pdf.js结合VSCode Live Server时遇模块加载/MIME类型错误

核心问题定位 #

你遇到的MIME类型错误本质是导入路径指向了目录而非具体JS文件：当你写import * as pdfjs from './node_modules/pdf.js';时，请求的是node_modules/pdf.js/这个目录，Live Server返回了目录的HTML索引页（MIME类型为text/html），而非预期的JS模块文件，导致浏览器报错。

修正导入方式（优先方案） #

1. 确保正确安装pdf.js #

先通过npm完成依赖安装：

npm install pdfjs-dist

注意：官方包名称是pdfjs-dist，而非pdf.js，这是你路径错误的核心原因之一。

2. 正确导入模块 #

在main.js中使用以下两种方式之一：

• ES模块规范导入（推荐）：

import * as pdfjs from 'pdfjs-dist';
// 若需加载worker，需额外配置：
pdfjs.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js';

• 相对路径导入（原生无构建工具环境）：

import * as pdfjs from './node_modules/pdfjs-dist/build/pdf.js';
pdfjs.GlobalWorkerOptions.workerSrc = './node_modules/pdfjs-dist/build/pdf.worker.js';

更简便的替代方案：使用CDN #

如果不想处理本地依赖路径问题，直接用CDN引入pdfjs，完全避开MIME和路径问题：

方式1：全局变量引入 #

在index.html中添加：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.min.js"></script>
<script src="./main.js"></script>

然后在main.js中直接使用全局变量pdfjsLib：

// 示例：加载PDF
pdfjsLib.getDocument('your-document.pdf').promise.then(doc => {
  // 处理文档逻辑
});

方式2：ES模块导入 #

在index.html中用模块方式引入：

<script type="module" src="./main.js"></script>

main.js中导入CDN资源：

import * as pdfjs from 'https://cdnjs.cloudflare.com/ajax/ajax/libs/pdf.js/4.0.379/pdf.mjs';
pdfjs.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.mjs';

Live Server MIME配置（可选，仅路径正确仍报错时） #

无需修改Live Server扩展内部文件，直接在项目根目录的.vscode/settings.json中添加自定义MIME规则：

{
  "liveServer.settings.mimeTypes": {
    ".js": "application/javascript",
    ".mjs": "application/javascript"
  }
}

保存后重启Live Server即可生效。

内容的提问来源于stack exchange，提问作者Pol Kal