반응형
Vue에서 하드코드된 favicon을 제거하는 방법은?
PWA 플러그인과 i18n이 함께 설치된 Vue CLI 3이 있습니다.
/public/의 모든 Vue 아이콘 파일(/public/img/icons의 PNG 포함), /src/interval의 logo.png 파일, /public/index.json의 link(rel=icon) 태그 제거, 기존 Vue 아이콘 파일에 대한 참조를 삭제하도록 manifest.json을 변경했으며 아직 페이지를 로드하지 않았습니다.DOM의 ed 링크:
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
<link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png">
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87">
<meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png">
이러한 파일은 존재하지 않으며 프로젝트 어디에서도 참조되지 않습니다.여기서 가장 이상한 점은 모든 파일을 삭제한 후에도 사용하는 브라우저에 기본 Vue favicon이 계속 표시되므로 클라이언트 측 캐시는 절대 아닙니다.
이거 어떻게 빼요?
방금 깨달은 건, 내 사진을 편집해야 한다는 거였어요vue.config.js
다음과 같은 내용을 추가합니다.
pwa: {
name: 'Test',
iconPaths: {
favicon32: '(any icon file here)',
favicon16: '(any icon file here)',
appleTouchIcon: '(any icon file here)',
maskIcon: '(any icon file here)',
msTileImage: '(any icon file here)'
}
}
디폴트 설정을 덮어쓰려면 (https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa) 참조)
언급URL : https://stackoverflow.com/questions/55322374/how-to-remove-the-hardcoded-favicon-in-vue
반응형
'source' 카테고리의 다른 글
VueJS 라우터의 'path'와 'fullPath'의 차이점은 무엇입니까? (0) | 2022.08.29 |
---|---|
CRUD가 vuejs vuex의 외부 구성 요소에서 개체를 추가함 (0) | 2022.08.29 |
VueJS | 메서드 "watch"의 컴포넌트 정의에 "object" 유형이 있습니다. (0) | 2022.08.29 |
[Vue warn] :렌더 오류: "TypeError: 정의되지 않은 속성 'getters'를 읽을 수 없습니다." (0) | 2022.08.29 |
웹 팩을 사용하여 하나의 프로젝트에서 여러 Vuejs 컴포넌트를 npm에 게시합니다. (0) | 2022.08.28 |