0
214
Vistascambiar el logotipo que se muestra en el navegador de pestañas no funciona en vuejs 3
Este es mi index.html :
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel='icon' href="public\img\favicon.png"> <title>ContreversyMedia</title> <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /></link>--> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>Estoy tratando de cambiar el logotipo predeterminado que se muestra en el navegador de pestañas:
Esta es mi carpeta pública:
Pero el problema es que eliminé el archivo pwa en mi proyecto y eliminé todos los íconos en public\img\icons, pero la herramienta de desarrollo aún muestra el archivo ubicado en ese lugar, pero mi carpeta está vacía. Eliminé el caché de mi navegador, cambié el navegador pero el mismo resultado:
No sé cómo manejar eso ya que no estoy acostumbrado a vuejs y cómo funciona su plantilla.
2 Respuestas
Responde la pregunta0
Los activos estáticos (archivos bajo public/ ) se sirven desde la URL base, por lo que su URL href no debe incluir public/ . También parece que el ícono está en public/img/icons , pero su href no especifica el subdirectorio de icons .
Suponiendo que se trata de un proyecto con andamios CLI de Vue, su href debería tener este aspecto:
<link rel="icon" href="<%= BASE_URL %>img/icons/favicon.png">0
En la pantalla de impresión de la estructura de carpetas, vi que su archivo index.html está en la misma carpeta que su favicon.png ( /public/img/icons/ ), por lo que Vue creará automáticamente un nuevo index.html para usted y todos los cambios que realice en su index.html serán ignorados.
Para solucionar este problema, deberá colocar su index.html en la raíz de su carpeta public (será /public/index.html ) y usar la ruta <%= BASE_URL %>img/icons/favicon.png en su importación de favicon ( <link rel="icon" href="<%= BASE_URL %>img/icons/favicon.png"> )