Laluan imej adalah salah selepas pembungkusan vue-cli3

Dengan perkembangan berterusan teknologi bahagian hadapan, pelbagai rangka kerja dan alatan turut muncul Dalam era gelombang hebat ini, Vue.js sudah pasti wujud yang tidak boleh diabaikan. Walau bagaimanapun, apabila Vue.js menjadi semakin popular, kami akan menghadapi beberapa masalah. Artikel ini akan memperkenalkan masalah laluan imej yang salah apabila menggunakan vue-cli3 untuk membungkus projek, dan menyediakan beberapa penyelesaian.

Penerangan Masalah

Apabila menggunakan vue-cli3 untuk pembangunan projek, kami biasanya boleh menggunakan tag img untuk memperkenalkan imej. Contohnya:

<img src="./assets/img/logo.png" alt="logo" />

Ini mengandaikan bahawa imej logo.png terletak dalam direktori assets projek. Imej dipaparkan dengan betul apabila menjalankan perintah npm run serve. Walau bagaimanapun, apabila kami menjalankan perintah npm run build untuk pakej, kami melawat halaman yang dibungkus dan mendapati bahawa imej tidak boleh dipaparkan seperti biasa Melalui alat pembangun penyemak imbas, kami dapati bahawa imej itu sebenarnya gagal dimuatkan, dan konsol memberikan Mesej ralat berikut:

http://your-domain.com/img/logo.4aebf758.png 404 (Not Found)

http://your-domain.com di sini merujuk kepada laluan direktori akar projek berpakej.

Sebab masalah ini

Kami tahu bahawa Vue.js adalah berdasarkan model pembangunan komponen Secara amnya, setiap komponen adalah fail berasingan, termasuk templat HTML dan gaya CSS , kod JavaScript , dsb. Semasa proses pembangunan Vue.js, kami biasanya menggunakan alat pembungkusan webpack untuk membina dan membungkus. Disebabkan oleh mekanisme pembungkusan fail webpack, ia akan membungkus semua sumber yang diperlukan oleh setiap komponen ke dalam fail JavaScript yang sepadan, dan penyemak imbas hanya boleh mendapatkan sumber statik melalui permintaan HTTP, jadi webpack akan membungkus fail sumber (termasuk imej) ) laluan adalah ditukar menjadi laluan permintaan HTTP.

Dalam erti kata lain, apabila kami menggunakan laluan relatif untuk merujuk fail sumber, imej akan dicari dalam direktori akar http://localhost:8080 apabila projek sedang berjalan, dan apabila membungkus, laluan imej telah dibungkus oleh webpack sebagai Laluan baharu diletakkan dalam direktori img di bawah direktori akar. Oleh itu, apabila kami menggunakan fail pakej webpack, kami perlu mengubah suai laluan.

Penyelesaian

Ubah suai laluan punca sumber statik

Kita boleh menggantikan laluan akar dengan mengubah suai nilai medan vue.config.js dalam publicPath untuk menyelesaikan masalah salah jalan.

Mula-mula, buat fail vue.config.js baharu dalam direktori akar projek dan masukkan kod berikut:

module.exports = {
  publicPath: './'
}

publicPath di sini sebenarnya menetapkan laluan storan sumber statik berpakej, seperti yang dinyatakan di atas Kod menunjukkan bahawa sumber statik dan index.html disimpan dalam direktori yang sama.

Gunakan laluan mutlak ke imej rujukan

Selain menyelesaikan masalah dengan mengubah suai publicPath, kami juga boleh terus menggunakan laluan mutlak ke imej rujukan, sekali gus mengelakkan masalah yang disebabkan oleh laluan relatif. Contohnya:

<img src="/img/logo.4aebf758.png" alt="logo" />

/ di sini mewakili laluan akar projek Imej yang dirujuk dengan cara ini tidak akan dipengaruhi oleh laluan relatif.

Letakkan fail imej dalam direktori awam

Kami juga boleh meletakkan fail imej dalam direktori /public Fail dalam direktori ini tidak akan dibungkus oleh webpack, tetapi akan disalin terus ke dalam direktori berpakej. Dengan cara ini kita boleh merujuk terus imej ini menggunakan laluan relatif.

Ringkasan

Sama ada dengan mengubah suai laluan atau menggunakan laluan mutlak untuk merujuk imej, penyelesaiannya agak mudah. Dalam pembangunan sebenar, untuk mengurangkan masalah ralat laluan, kita boleh membangunkan tabiat yang baik semasa pembangunan dan cuba menggunakan laluan mutlak atau meletakkan imej dalam direktori awam. Ini bukan sahaja memudahkan penyahpepijatan dan penyelenggaraan, tetapi juga mengurangkan ralat laluan selepas pembungkusan. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Laluan imej adalah salah selepas pembungkusan vue-cli3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!