Vue CLI Favicon - PullRequest
Новая
       29

Vue CLI Favicon

0 голосов
/ 10 июня 2018

Я использую шаблон веб-пакета Vue CLI, но пытаюсь загрузить свой собственный значок.

Я запустил vue init webpack my-app

В index.html Я включил: 

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

... и я вижу значок (Vue) по умолчанию.Однако я не могу понять, где находится этот значок (или иным образом на него ссылаются), и не могу понять, где разместить свой собственный значок, чтобы заменить его.

Я также следовал совету в этомответ , в котором предлагается поместить изображение значка в папку static и включить его в index.html: 

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

Однако у меня нет доступа к своему значку, как и было обещано.

Я предполагаю, что местоположение / файл favicon упоминается где-то в файлах конфигурации CLI, но я не могу его найти.

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

У меня та же проблема:

  • Я добавил свой собственный значок в общую папку, переписав существующий vue.Но все же, Vue Favicon обнаруживается;локально (vue serve) и на моем сервере (загрузил dist / content, созданный с помощью vue build).
  • Затем я переместил значок в новую папку public / img.И хотя эта папка с favicon была доступна в пакете отладки и производства, она не использовалась в браузере ... Всегда появлялся vue favicon.Я предполагаю: когда vue собирает пакет dist, он не ищет файл favicon.ico и просто жестко кодирует ссылку favicon.

Я проверил index.html, и созданная ссылка показываетАбсолютный адрес ссылки для значка значка: 

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

После того, как я изменил адрес с "/" на "./", он заработал, и был показан мой значок.Я мог бы предположить, что где-то в джунглях конфигурации спрятан параметр конфигурации, который я еще не нашел; -)

Если у кого-то есть идея, как получить vue для создания правильного финала (и, если возможно, отладки)) версия, было бы здорово!

0 голосов
/ 11 июня 2018

Вы можете обращаться с ним как с обычным изображением, и сборщик скомпилирует ico как обычное изображение.Ico, безусловно, будет включен в скомпилированный код, потому что он легкий.Так что если ваш index.html находится в src на том же уровне, что и каталог img:

  • proj / src / index.html
  • proj / src / img / favicon.ico

Вы будете иметь в index.html: 

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

Или вы можете просто добавить его непосредственно в публичный или dist (где создается проект) каталог, как он естьи удалите тег favicon из вашего index.html.

Если он не работает, возможно, вам придется поискать конфигурацию webpack ...

Я использую vue-cli 3.0.0-beta.15 и создайте мой проект с: 

vue create proj

и значок находится в публичном каталоге:

  • proj / public / favicon.ico
...