vue.js 웹팩 프로젝트에서 favicon.ico를 올바르게 설정하는 방법은 무엇입니까?
vue webpack.NET을 사용하여 프로젝트를 만들었습니다 vue-cli.
vue init webpack myproject
그런 다음 dev모드 에서 프로젝트를 실행했습니다 .
npm run dev
이 오류가 발생했습니다.
리소스를로드하지 못했습니다. 서버가 404 (찾을 수 없음) 상태로 응답했습니다. http : // localhost : 8080 / favicon.ico
그래서 webpack 안에서 favicon.ico올바르게 가져 오는 방법은 무엇입니까?
웹팩 템플릿의 프로젝트 구조를 확인하세요 : 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 대 favicon.ico-왜 ICO 대신 PNG를 사용해야합니까?
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>
도움이 되길 바랍니다!
나를 위해 href 내부에서 BASE_URL을 작동합니다. 이 같은
<link rel="icon" href="<%= BASE_URL %>favicon.ico">이것을 확인하십시오 : https://cli.vuejs.org/guide/html-and-static-assets.html#the-public-folder
'code' 카테고리의 다른 글
| 큰 테이블에서 SQL Server 쿼리 성능 향상 (0) | 2020.09.25 |
|---|---|
| 추적 된 원격 분기의 변경 사항으로 로컬 분기 업데이트 (0) | 2020.09.25 |
| 데이터베이스에서 장고 모델을 생성 할 수 있습니까? (0) | 2020.09.25 |
| JUnit으로 Java에서 추상 클래스를 테스트하는 방법은 무엇입니까? (0) | 2020.09.24 |
| sed를 사용하여 문자열에서 텍스트를 추출하는 방법은 무엇입니까? (0) | 2020.09.24 |