如何配置Vite访问公共文件夹之外的文件？

Question

我有这个文件结构：

• 我的项目
  • 应用程序
  • 引导程序
  • 配置
  • 数据库
  • 节点模块
    • pdfjs-dist
      • 构建
        • pdf.js
  • 公共
    • 上传
      • 文件
        • solution_12.pdf
  • 资源

有人可以帮我知道如何通过配置 Vite 访问 pdf.js 吗？

我尝试过的：

在vite.config.js中，导出时默认defineConfig：

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

我在我的 app.blade.php 中使用了 @vite：

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

我收到了这个错误： 无法在 Vite 清单中找到文件：node_modules/pdfjs-dist/build/pdf.js。

有人可以给我解释一下吗？

Answer 1

从你的问题中我看到你似乎正在使用 Laravel（很好，因为这也是我熟悉的）。

我建议查看 Laravel 文档，特别是新安装 Laravel 时开箱即用的 vite 配置。通过遵循他们指定的目录约定，您将避免尝试打破他们的模式而带来无尽的麻烦。查看 Laravel 文档的以下部分将是一个很好的起点： https://laravel.com/docs/10.x/vite#main-content

在理想的世界中，您将遵循 Laravel 假设的相同约定...即您的项目有一个

resources/js

文件夹，您通常会在其中存储项目的 javascript（例如

app.js

例如）。

只要您在应用程序中需要的地方导入 javascript 文件，最好的解决方案可能是使用

resources/js/app.js

作为您的 Vite“输入”，并在 Vite Blade 指令中引用它（如

resources/js/app.js

）。然后，Vite 将在您的应用程序中需要时导入该依赖项。

# Your vite.config.js excerpt would look like:

plugins: [
    laravel({
        input: [
            'resources/js/app.js'
        ],
        refresh: true,
    }),
],

# Your @vite blade directive would look like:

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

# Your import call (wherever you're using this dependency) might look like:

import 'pdfjs-dist/build/pdf.js';

希望有帮助！