Apa yang salah dengan projek penciptaan perancah vue tanpa fail statik?

Dengan pembangunan berterusan teknologi bahagian hadapan, semakin banyak rangka kerja bahagian hadapan diperkenalkan ke dalam pembangunan harian kami. Antara rangka kerja ini, Vue.js semakin digemari oleh pembangun sebagai rangka kerja hadapan yang pantas dan ringan. Semasa pembangunan Vue.js, kami biasanya menggunakan Vue CLI, perancah rasmi, untuk mencipta projek. Walau bagaimanapun, dalam beberapa kes, apabila kami menggunakan Vue CLI untuk mencipta projek, kami mendapati bahawa folder statik tidak dijana, yang mungkin mengelirukan kepada pembangun pemula. Artikel ini akan membawa anda melalui cara untuk menyelesaikan masalah yang biasa dihadapi ini.

Mula-mula mari kita fahami mengapa ini berlaku. Apabila kami mencipta projek baharu melalui Vue CLI, Vue CLI akan memulakan beberapa konfigurasi lalai dan struktur sebagai fail asas projek. Fail-fail ini terkandung dalam folder yang dipanggil src dalam direktori akar projek. Secara lalai, Vue CLI tidak menjana folder yang mengandungi fail statik untuk kami. Oleh itu, apabila kami cuba mengakses sumber folder statik, seperti fail CSS atau JavaScript, kami biasanya melihat halaman ralat 404.

Jadi, bagaimana untuk menambah folder statik pada projek yang dibuat oleh Vue CLI? Dua kaedah berbeza diperkenalkan di bawah:

Kaedah 1: Buat folder statik secara manual

Pertama, kita perlu mencipta folder bernama statik secara manual dalam direktori akar projek. Folder ini akan digunakan untuk menyimpan fail sumber statik. Anda boleh mencipta beberapa subfolder di bawah folder statik untuk menyimpan pelbagai jenis sumber statik. Sebagai contoh, kita boleh mencipta folder CSS dan menyimpan semua fail CSS di dalamnya kita juga boleh mencipta folder imej untuk menyimpan semua sumber imej.

Untuk memberitahu Vue CLI bahawa kami telah mencipta folder statik, kami perlu mencari fail bernama vue.config.js dalam direktori akar dan membukanya. Jika anda tidak mempunyai fail, anda perlu menciptanya secara manual. Tambahkan kod berikut pada fail vue.config.js:

module.exports = {
  chainWebpack: config => {
    config
      .plugin('copy')
      .tap(args => {
        args[0][0].from = 'static'
        return args
      })
  }
}

Kod ini memberitahu Vue CLI untuk menyalin semua kandungan folder statik ke akar projek semasa membina projek. Kini, anda boleh meletakkan fail sumber statik anda ke dalam folder statik dan menggunakannya seperti biasa dalam projek Vue.js anda.

Kaedah 2: Gunakan folder awam

Vue CLI juga menyediakan cara lain untuk menambah fail statik pada projek. Cara ini adalah untuk menyimpan fail statik dalam folder awam. Folder awam adalah berbeza daripada folder src dan tidak akan disusun dan dibungkus ke dalam projek akhir. Sebaliknya, mereka akan disalin ke direktori akar projek binaan akhir.

Untuk menggunakan kaedah ini, kami hanya perlu meletakkan fail sumber statik ke dalam folder awam dan menggunakannya dalam fail HTML kami seperti ini:

<link rel="stylesheet" href="<%= BASE_URL %>css/reset.css">

Nota Apa yang menarik ialah dalam Vue CLI 3, jika kami menyimpan fail statik dalam folder awam, kami tidak perlu melakukan sebarang konfigurasi dalam fail vue.config.js.

Ringkasan

Semasa proses pembangunan Vue.js, kami biasanya menggunakan Vue CLI, perancah rasmi, untuk mencipta projek. Selepas kami mencipta projek menggunakan Vue CLI, jika kami mendapati bahawa folder statik tidak dijana, kami boleh menambah fail statik dengan mencipta folder statik secara manual atau menggunakan folder awam. Jika anda seorang pembangun pemula yang sedang mempelajari Vue.js, saya percaya artikel ini boleh membantu anda.

Atas ialah kandungan terperinci Apa yang salah dengan projek penciptaan perancah vue tanpa fail statik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!