Vue CLI Favicon

Vue CLI Favicon

Vue CLI 웹 팩템플릿을 사용하고 있는데 favicon을 로드하는 데 어려움을 겪고 있습니다.

나는 도망쳤다vue init webpack my-app

인index.html다음을 포함합니다.

<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">

... 디폴트(Vue) favicon이 표시됩니다.다만, 그 favicon의 위치(또는 참조)를 알 수 없습니다.또, 자신의 favicon을 어디에 배치해, 대체할지 알 수 없습니다.

저도 이 답변의 조언을 따랐습니다.이것은 favicon 이미지를 favicon에 배치하는 것을 제안합니다.static폴더 및 폴더 포함index.html:

<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>

하지만 약속대로 나는 나의 favicon에 접근할 수 없다.

favicon location/file은 CLI 컨피규레이션파일 중 어딘가에서 참조되고 있는 것 같습니다만, 찾을 수 없습니다.

저도 같은 문제가 있어요.

• 기존 vue를 덮어쓰고 공용 폴더에 나만의 favicon을 추가했습니다.그래도 vue favicon은 로컬(vue serve)과 내 서버(vue 빌드로 작성된 dist/콘텐츠 업로드)로 표시됩니다.
• 그런 다음 favicon을 새 공용/img 폴더로 이동했습니다.favicon이 있는 폴더는 디버깅 및 프로덕션 패키지에서는 사용할 수 있었지만 브라우저에서는 사용되지 않았습니다.항상 뷔 파비콘이 나타났어WHen vue는 favicon.ico 파일을 검색하지 않고 favicon 링크를 하드코드하기만 하면 됩니다.

index.html을 확인했는데 작성된 링크는 favicon 아이콘의 절대 링크 주소를 보여줍니다.

<link rel=icon href=/favicon.ico><title>

주소를 "/"에서 "/"로 바꾸면 작동하여 즐겨찾기가 표시되었습니다.아직 찾지 못한 설정 옵션이 설정 정글 어딘가에 숨겨져 있는 것을 상상할 수 있었습니다;-)

vue에서 올바른 최종 버전(및 가능하면 debug)을 구축하는 방법을 알고 계신 분이 있다면 좋겠습니다.

또한 favicon의 매니페스트도 업데이트해야 할 수 있습니다./public/manifest.json.

일반적인 이미지처럼 취급할 수 있으며, 빌더가 ico를 일반 이미지로 컴파일합니다.ico는 가볍기 때문에 컴파일된 코드에 반드시 포함될 것입니다.따라서 index.html이 img 디렉토리와 동일한 수준의 src에 있는 경우:

• proj/src/index.displaces.pa
• proj/src/img/micon.ico

index.html에 있습니다.

 <link href='./img/favicon.png' rel="icon" Atype="image/x-icon" />

또는 public 디렉토리 또는 dist(프로젝트 빌드처) 디렉토리에 직접 추가하고 index.html의 favicon 태그를 삭제할 수도 있습니다.

동작하지 않는 경우는, Web pack config 를 참조할 필요가 있습니다.

vue-cli 3.0.0-beta.15를 사용하여 다음과 같이 프로젝트를 만듭니다.

vue create proj

favicon은 public 디렉토리 아래에 있습니다.

• proj/public/publicicicon.ico

webapp을 azure로 전개할 때 이 문제가 발생했습니다.vueCliMiddleware 패키지를 통해 dotnet core 3.1 api 서비스를 실행하고 있습니다.index.html의 원래 코드는 다음과 같습니다.

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

BASE_URL 변수 구문에 의해 로컬 및 azure 양쪽에서 이 문제가 수정되기 전에 "."를 추가합니다.

<link rel="icon" href=".<%= BASE_URL %>favicon.ico">

위와 아래의 안내에 감사드립니다!

ASP에서 favicon.ico를 서비스하고 있습니다.넷 MVC azure 웹사이트 리액트 앱에서 %PUBLIC_URL%를 대체하는 방법

언급URL : https://stackoverflow.com/questions/50778850/vue-cli-favicon