Bagaimanakah cara saya mengkonfigurasi Vite untuk mengakses fail di luar folder awam?

Question

Saya mempunyai struktur fail ini:

• Projek saya
  • Apl
  • Bootstrap
  • Tatarajah
  • Pangkalan data
  • Modul nod
    • pdfjs-dist
      • Bina
        • pdf.js
  • Awam
    • Muat naik
      • Dokumen
        • penyelesaian_12.pdf
  • Sumber

Bolehkah seseorang membantu saya mengetahui cara mengkonfigurasi Vite untuk mengakses pdf.js?

Saya cuba:

Dalam vite.config.js, eksport defineConfig lalai:

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

Saya menggunakan @vite dalam app.blade.php saya:

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

Saya mendapat ralat ini: Tidak dapat mencari fail: node_modules/pdfjs-dist/build/pdf.js dalam manifes Vite.

Boleh sesiapa jelaskan kepada saya?

Answer 1

Daripada soalan anda, nampaknya anda menggunakan Laravel (yang bagus kerana saya juga sudah biasa dengannya).

Saya mengesyorkan anda menyemak dokumentasi Laravel, khususnya konfigurasi vite yang keluar dari kotak dengan pemasangan Laravel baharu. Dengan mengikuti konvensyen direktori mereka yang ditentukan, anda akan mengelakkan masalah yang tidak berkesudahan untuk cuba memecahkan corak mereka. Melihat bahagian berikut dokumentasi Laravel akan menjadi titik permulaan yang baik: https://laravel.com/docs/10.x/vite#main-content

Dalam dunia yang ideal, anda akan mengikuti konvensyen yang sama yang Laravel andaikan... iaitu projek anda mempunyai satu resources/js 文件夹，这是您通常存储项目的 javascript 的位置（例如 app例如.js).

Penyelesaian terbaik mungkin menggunakan resources/js/app.js 作为您的 Vite“输入”，并在 Vite Blade 指令中引用它好吧（如 resources/js/app.js) asalkan anda mengimport fail javascript di mana sahaja anda memerlukannya dalam aplikasi anda. Vite kemudiannya akan mengimport pergantungan itu apabila aplikasi anda memerlukannya.

# 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';

Semoga ini membantu!