Tôi đã tạo một dự án vue webpack sử dụng vue-cli.Làm thế nào để thiết lập favicon.ico đúng trên dự án webpack vue.js?
vue init webpack myproject
Và sau đó chạy dự án dưới dev chế độ:
npm run dev
Tôi đã nhận lỗi này:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/favicon.ico
Vì vậy, bên webpack, làm thế nào để nhập khẩu các favicon.ico chính xác?
Kiểm tra cấu trúc Dự án webpack mẫu: https://vuejs-templates.github.io/webpack/structure.html
Lưu ý rằng có một thư mục tĩnh, cùng với node_modules, src vv
Nếu bạn đặt một số hình ảnh vào thư mục static, như favicon.png, nó sẽ được cung cấp tại http://localhost:8080/static/favicon.png
Đây là tài liệu dành cho nội dung tĩnh: https://vuejs-templates.github.io/webpack/static.html
Đối với vấn đề favicon của bạn, bạn có thể đặt một favicon.ico hoặc favicon.png vào thư mục static và tham khảo trong <head> của index.html của bạn như sau:
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
Nếu bạn không xác định một favicon.ico trong index.html của bạn, sau đó trình duyệt sẽ yêu cầu một favicon từ gốc trang web (hành vi mặc định). Nếu bạn chỉ định một favicon như trên, bạn sẽ không thấy 404 nữa. Các favicon cũng sẽ bắt đầu hiển thị trong các tab trình duyệt của bạn.
Là một mặt lưu ý, đây là lý do tại sao tôi thích PNG thay vì tập tin ICO:
favicon.png vs favicon.ico - why should I use PNG instead of ICO?
bạn đã cố gắng chỉ thả nó vào thư mục gốc của trang web? :) Hoặc trong thư mục xây dựng công cộng? – Benjamin