En este tutorial te mostraré cómo hacer que la ruta pública de Vue (al usar la vue cli para compilar nuestros proyectos con npm run build) sea el directorio actual, es decir, ./.

Normalmente la Vue CLI va a compilar y crear el archivo index.html pero en las rutas habrá algo como:

script src=/js/script.js

Si te fijas, no tiene el ./, por lo que en varios servidores causará errores. Hoy te enseñaré cómo hacer que Vue CLI compile las rutas de manera relativa al directorio actual.

Configurando vue.config.js

En caso de que no exista, crea el archivo llamado vue.config.js. Luego dentro de module.exports agrega publicPath.

Sucede algo interesante y es que aunque se configure como ./, al compilar se elimina esa parte. Así que un truco es declarar la publicPath como ././ ya que cuando se elimine un ./ quedará el otro fragmento.

Para mi caso, el archivo completo queda así:

See the gist on github.

Y cuando se genera el index.html las rutas ya son relativas a ./ (al ejecutar npm run build) como se ve en el siguiente ejemplo:

See the gist on github.

Fíjate en que por ejemplo en la línea 21 está el src=./js/chunks-vendors.js

En cambio, sin esa configuración, sería src=/js/chunks-vendor.js. Puede que parezca algo simple, pero es algo importante sobre todo cuando la app se servirá en ciertos servidores como Apache.