Selepas vue dibungkus, berapa baris kod sumber dipaparkan dan ralat dilaporkan?

Baru-baru ini, dalam proses menggunakan Vue untuk pembangunan projek, saya mendapati bahawa masalah "menunjukkan berapa baris kod sumber dilaporkan" sering berlaku apabila pembungkusan ini selalunya tidak berlaku di peringkat pembangunan tempatan, tetapi sebaik sahaja pakej dikeluarkan dan dalam talian , akan menimbulkan rasa tidak puas hati di kalangan ramai pengguna, malah boleh menjejaskan operasi biasa projek Oleh itu, kami perlu menjalankan penyelidikan yang mendalam tentang isu ini untuk menyelesaikan masalah ini dengan lebih baik.

Pertama sekali, kita perlu memahami sebab ralat dalam bilangan baris kod sumber. Masalah ini sebenarnya disebabkan oleh Vue memampatkan kod JavaScript kami semasa proses pembungkusan, menyebabkan mesej ralat tidak dapat menunjukkan lokasi ralat dengan tepat. Oleh itu, apabila menangani masalah ini, kita perlu mengubah suai fail konfigurasi berpakej untuk menjadikan kod berpakej lebih mudah untuk nyahpepijat.

Seterusnya, kami akan mula memperkenalkan secara terperinci cara mengubah suai fail konfigurasi untuk menyelesaikan masalah ini. Dalam Vue, kami boleh mengawal pembungkusan dengan mengubah suai fail konfigurasi webpack. Khususnya, kita perlu menambah kod berikut pada fail webpack.prod.conf.js:

devtool: 'source-map',

Fungsi kod ini adalah untuk mendayakan fungsi peta sumber, supaya kod yang dibungkus boleh dibandingkan dengan yang asal Kod dipetakan supaya apabila ralat berlaku, kami dapat mengesan lokasi ralat dengan tepat. Pada masa yang sama, dalam fail ini, kita juga perlu mematikan pengoptimuman mampatan UglifyJsPlugin untuk menjadikan penyahpepijatan lebih mudah Kod khusus adalah seperti berikut:

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  },
  sourceMap: true,
  parallel: true
})

Selepas pengubahsuaian selesai, kita boleh. jalankan semula arahan pembungkusan, dan ia akan Didapati bahawa selepas pembungkusan selesai, fail baharu muncul: my-project.min.js.map. Fail ini ialah fail peta sumber, yang mengandungi perhubungan pemetaan antara kod termampat kami dan kod asal, yang boleh membantu kami mencari lokasi ralat dengan cepat apabila ralat berlaku.

Dengan cara ini, kami boleh menyelesaikan masalah "memaparkan bilangan baris kod sumber ralat dengan berkesan", mencari ralat dengan lebih tepat dan dengan itu meningkatkan kecekapan penyahpepijatan kami. Pada masa yang sama, sebelum projek masuk dalam talian, kami perlu membatalkan pengubahsuaian di atas dan melaksanakan semula arahan pembungkusan untuk memastikan kod yang kami terbitkan dioptimumkan dan dimampatkan, yang boleh mengurangkan masa permintaan penyemak imbas dan meningkatkan pengalaman pengguna.

Akhir sekali, kami perlu ambil perhatian bahawa untuk projek besar, berbilang mesej ralat mungkin muncul semasa proses penyahpepijatan Pada masa ini, kami perlu meneruskan satu demi satu melalui maklumat kedudukan dalam fail peta sumber agar segala masalah dapat diselesaikan agar projek dapat berjalan dengan lebih stabil.

Atas ialah kandungan terperinci Selepas vue dibungkus, berapa baris kod sumber dipaparkan dan ralat dilaporkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!