Arreglando carga de la imagen "logo.png" de PlatziMusic al hacer deploy a Github Pages

En el video “Enviando una aplicación con Vue.js a producción”, al acceder al sitio usando Github Pages, la imagen del logo no carga correctamente. Lo pueden ver en esta imagen.

Esto se debe a la forma en la que está configurado el file-loader de nuestro archivo webpack.config.js:

{
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
}

Esto hace que la ruta resultante a la que hace referencia el atributo src del la etiqueta img del logo tenga al final un código hash, quedando de esta forma en el HTML renderizado:

<img src="/dist/logo.png?82b9c7a5a3f405032b1db71a25f67021">

Para que esto no ocurra, basta con quitar ?[hash] del string asignado a la propiedad name:

{
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
}

Además de esto, no hace falta establecer rutas directas a la página para el script del archivo HTML ni para el src del logo en el código fuente, por lo tanto:

En el script del HTML:

<scriptsrc="https://gabrielnz.github.io/platzimusic-vuejs/dist/build.js"></script>

Lo dejamos de esta forma:

<scriptsrc="dist/build.js"></script>

En la etiqueta template del archivo App.vue:

img(src='https://gabrielnz.github.io/platzimusic-vuejs/dist/logo.png')

Lo dejamos de esta forma:

img(src='dist/logo.png')

Por último corremos de nuevo el comando npm run build, actualizamos los cambios en la rama master de nuestro repositorio de Github, esperamos unos segundos, recargamos nuestra página y listo.

Aquí les dejo el enlace a mi página 😃