আমি vue webpackব্যবহার করে একটি প্রকল্প তৈরি করেছি vue-cli।
vue init webpack myproject
এবং তারপরে devমোডের অধীনে প্রকল্পটি চালাও:
npm run dev
আমি এই ত্রুটি পেয়েছি:
সংস্থানটি লোড করতে ব্যর্থ: সার্ভারটি 404 (পাওয়া যায়নি) একটি স্থিতির সাথে প্রতিক্রিয়া জানিয়েছে : http: // লোকালহোস্ট: 8080 / ফেভিকন.ইকো
সুতরাং ওয়েবপ্যাকের ভিতরে, কীভাবে favicon.icoসঠিকভাবে আমদানি করবেন ?
উত্তর:
ওয়েবপ্যাক টেম্পলেটটির প্রকল্পের কাঠামোটি দেখুন: https://vuejs-templates.github.io/webpack/struct.html
নোট একটি স্ট্যাটিক ফোল্ডারের নেই, সহ node_modules, srcইত্যাদি
আপনি যদি staticফোল্ডারে কিছু চিত্র রাখেন তবে favicon.pngএটি http: // লোকালহোস্ট: 8080 / স্ট্যাটিক / ফেভিকন.পিএনএজে উপলব্ধ করা হবে
স্থিতিশীল সম্পদের জন্য এখানে ডকুমেন্টেশন রয়েছে: https://vuejs-templates.github.io/webpack/static.html
আপনার ফেভিকন সমস্যার জন্য, আপনি একটি লাগাতে পারেন favicon.icoঅথবা favicon.pngমধ্যে staticফোল্ডার এবং এ পড়ুন <head>আপনার index.html এর নিম্নরূপ:
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
আপনি যদি নিজের favicon.icoমধ্যে কোনও সংজ্ঞা দেন না index.html, তবে ব্রাউজারটি ওয়েবসাইট রুট (ডিফল্ট আচরণ) থেকে ফ্যাভিকনের জন্য অনুরোধ করবে। আপনি যদি উপরে যেমন একটি ফ্যাভিকন নির্দিষ্ট করে থাকেন তবে আপনি আর 404 দেখতে পাবেন না। ফ্যাভিকন আপনার ব্রাউজার ট্যাবগুলিতে দেখাতেও শুরু করবে।
পার্শ্ব নোট হিসাবে, এখানে আইসিও ফাইলের পরিবর্তে আমি পিএনজি পছন্দ করি তার কারণ:
ফেভিকন.পিং বনাম ফেভিকন.ইকো - কেন আমি আইসিওর পরিবর্তে পিএনজি ব্যবহার করব?
Laravel 5.x জন্য লিটল আপডেট, আপনার জায়গায় favicon.icoবা favicon.pngমধ্যে /publicফোল্ডার এবং আপনার এটির উল্লেখ index.htmlভালো:
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
আশা করি এটা সাহায্য করবে !
কোনও কারণে, পূর্বনির্ধারিত সমাধানগুলি ডিফল্ট favicon.icoফাইলটিকে রূপান্তর করার favicon.pngএবং এর নামকরণকরণের আগে আমার পক্ষে কাজ করে নি favicon-xyz.png(উদাহরণস্বরূপ (আমি এই ফাইলটি /publicফোল্ডারে রেখেছি ) এবং index.htmlফাইলটি নিম্নরূপে সম্পাদনা করেছি :
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="<%= BASE_URL %>favicon-xyz.png">
.
.
.
</head>
কারও পক্ষে উপকারী হতে পারে।