source

Vue에서 하드코드된 favicon을 제거하는 방법은?

factcode 2022. 8. 29. 22:03
반응형

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

반응형