He creado un vue webpack proyecto con vue-cli.

vue init webpack myproject

Y, a continuación, se ejecutó el proyecto bajo dev modo:

npm run dev

Tengo este error:

No se pudo cargar el recurso: el servidor responde con un estado de error 404 (No Encontrado) http://localhost:8080/favicon.ico

Así que dentro de webpack, cómo importar el favicon.ico correctamente?

  • ¿Has probado simplemente colocándolo en la raíz del sitio? 🙂 O en el público carpeta de compilación?
InformationsquelleAutor Alfred Huang | 2016-10-22

3 Comentarios

  1. 130

    Retirar la Estructura del Proyecto de webpack plantilla: https://vuejs-templates.github.io/webpack/structure.html

    Nota que no es estática de la carpeta, junto con node_modules, src, etc.

    Si se pone una imagen en la static carpeta, como favicon.png, que estará disponible en http://localhost:8080/static/favicon.png

    Aquí está la documentación de los recursos estáticos: https://vuejs-templates.github.io/webpack/static.html

    Para su favicon problema, usted puede poner una favicon.ico o favicon.png en el static carpeta y se refieren en el <head> de su index.html de la siguiente manera:

    <head>
        <meta charset="utf-8">
        <link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
        <title>My Vue.js app</title>
        ...
    </head>

    Si no se define un favicon.ico en su index.html, a continuación, el navegador solicitará un favicon de la página web de la raíz (comportamiento por defecto). Si especifica un favicon como en el anterior, no verá que 404 más. El favicon también empiezan a aparecer en su navegador de pestañas.

    Como una nota de lado, aquí está la razón por la que prefiero PNG en lugar de archivo ICO:

    favicon.png vs favicon.ico – ¿por qué debo usar PNG en lugar de ICO?

    • lo que si quiero mantener mi favicon en src/activos? es que es mejor dejarlo en la estática de la carpeta junto con .gitkeep?
    • No he intentado esto, pero si usted mantiene su imagen en el directorio src/activos, será tratada como un módulo de la dependencia y tendrá que ir al final del archivo como una imagen en línea (formato base64). Esto va a aumentar innecesariamente el tamaño de la construcción. Nada de que preocuparse, esto no afectará la realización de cualquier manera. Es mi preferencia para guardar las imágenes como «real de los recursos estáticos» como se ha explicado en el docs. Sus preferencias pueden variar. Usted necesita para probar ambos métodos y elegir el que funciona para usted.
    • Esta respuesta parece un poco fuera de fecha. En la actual vue webpack de la plantilla, hay un público el directorio, no un static directorio.
  2. 0

    Poco de actualización para Laravel 5.x, el lugar de su favicon.ico o favicon.png en el /public carpeta y se refieren a ella en su index.html como este:

    <head>
        <meta charset="utf-8">
        <link rel="shortcut icon" type="image/png" href="/favicon.png"/>
        <title>My Vue.js app</title>
        ...
    </head>

    Espero que ayude !

Dejar respuesta

Please enter your comment!
Please enter your name here