ฉันได้สร้างvue webpackโครงการโดยใช้vue-cliไฟล์.
vue init webpack myproject
จากนั้นรันโปรเจ็กต์ภายใต้devโหมด:
npm run dev
ฉันได้รับข้อผิดพลาดนี้:
ไม่สามารถโหลดทรัพยากร: เซิร์ฟเวอร์ตอบสนองด้วยสถานะ 404 (ไม่พบ) http: // localhost: 8080 / favicon.ico
ดังนั้นใน webpack วิธีการนำเข้าfavicon.icoอย่างถูกต้อง?
คำตอบ:
ตรวจสอบโครงสร้างโครงการของเทมเพลต webpack: https://vuejs-templates.github.io/webpack/structure.html
ทราบว่ามีโฟลเดอร์คงพร้อมกับnode_modules, srcฯลฯ
หากคุณใส่ภาพลงในstaticโฟลเดอร์เช่นภาพfavicon.pngนั้นจะมีให้ที่http: // localhost: 8080 / static / favicon.png
นี่คือเอกสารสำหรับสินทรัพย์คงที่: https://vuejs-templates.github.io/webpack/static.html
สำหรับปัญหา Favicon ของคุณคุณสามารถใส่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>
หากคุณไม่ได้กำหนด a favicon.icoในของคุณindex.htmlเบราว์เซอร์จะขอไอคอน Fav จากรูทของเว็บไซต์ (พฤติกรรมเริ่มต้น) หากคุณระบุไอคอน Fav ด้านบนคุณจะไม่เห็น 404 อีกต่อไป ไอคอน Fav จะเริ่มปรากฏในแท็บเบราว์เซอร์ของคุณด้วย
หมายเหตุด้านข้างนี่คือเหตุผลที่ฉันชอบ PNG แทนไฟล์ ICO:
อัปเดตเล็กน้อยสำหรับ 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>
อาจมีประโยชน์สำหรับใครบางคน