如何配置 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-內容

#在理想的世界中，您將遵循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';

希望有幫助！