如何配置Vite访问public目录外的pdf.js文件？

项目文件结构：

• MyProject
  • app
  • bootstrap
  • config
  • database
  • node_modules
    • pdfjs-dist
      • build
        • pdf.js
  • public
    • upload
      • documents
        • solution_12.pdf
  • resources

尝试通过Vite引入pdf.js，在vite.config.js中配置：

plugins: [
        laravel({
            input: [
                'node_modules/pdfjs-dist/build/pdf.js'
            ],
            refresh: true,
        }),
    ],

并在app.blade.php中使用：

@vite([
    'node_modules/pdfjs-dist/build/pdf.js'
    ])

出现错误：Unable to locate file in Vite manifest: node_modules/pdfjs-dist/build/pdf.js

方法一：通过ES模块导入（推荐） #

Laravel Vite插件的input参数用于指定项目的入口资源文件，而非直接引入node_modules中的依赖。正确的做法是通过模块导入的方式引入pdfjs-dist：

1. 在项目的主JS文件（比如resources/js/app.js）中导入pdfjs：

// 导入pdfjs核心库
import * as pdfjsLib from 'pdfjs-dist';
// 若需要使用Worker，需额外导入并配置
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

2. 修改vite.config.js的input指向你的主资源文件：

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ],
            refresh: true,
        }),
    ],
});

3. 在app.blade.php中引用主资源：

@vite(['resources/css/app.css', 'resources/js/app.js'])

方法二：直接引入CDN资源（快速方案） #

如果不想通过模块导入，也可以直接在blade模板中引入pdf.js的CDN链接：

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

这种方式无需配置Vite，适合快速测试场景。

错误原因说明 #

你之前的配置错误在于将node_modules中的文件直接作为Vite的入口输入，Laravel Vite插件不会处理这种路径的文件作为入口。Vite会自动解析import语句中的依赖，并将其打包到最终资源中，无需手动将依赖文件加入input列表。

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