vue.js 웹팩 프로젝트에서 favicon.ico를 올바르게 설정하는 방법은 무엇입니까?

Question 1

을 vue webpack사용하여 프로젝트를 만들었습니다 vue-cli.

vue init webpack myproject

그런 다음 dev모드 에서 프로젝트를 실행했습니다 .

npm run dev

이 오류가 발생했습니다.

리소스를로드하지 못했습니다. 서버가 404 (찾을 수 없음) 상태로 응답했습니다. http : // localhost : 8080 / favicon.ico

그래서 webpack 내부에서 favicon.ico올바르게 가져 오는 방법은 무엇입니까?

Question 2

웹팩 템플릿의 프로젝트 구조를 확인하세요 : https://vuejs-templates.github.io/webpack/structure.html

정적 폴더와 함께이 있다는 것을 참고 node_modules, src등

static와 같은 이미지를 폴더에 넣으면 http : // localhost : 8080 / static / favicon.pngfavicon.png 에서 사용할 수 있습니다 .

다음은 정적 자산에 대한 문서입니다. 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브라우저가 웹 사이트 루트에서 파비콘을 요청합니다 (기본 동작). 위와 같이 favicon을 지정하면 더 이상 404가 표시되지 않습니다. 파비콘은 브라우저 탭에도 표시되기 시작합니다.

참고로 ICO 파일 대신 PNG를 선호하는 이유는 다음과 같습니다.

favicon.png vs favicon.ico-왜 ICO 대신 PNG를 사용해야합니까?

Question 3

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>

도움이 되길 바랍니다!

Question 4

어떤 이유로, 위의 솔루션은 기본 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>

누군가에게 유용 할 수 있습니다.