VueJS

Configurar publicPath de Vue CLI en ./

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í:

module.exports = {
    // En realidad debería ser "./" pero al compilar se remueve el ./ así que mejor se pone doble para que solo
    // se remueva el primero. Gracias a: https://github.com/vuejs/vue-cli/issues/1623#issuecomment-729086789
    publicPath: process.env.NODE_ENV === 'production' ? '././' : './',
};

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:

<!DOCTYPE html>
<html lang=en>

<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=./favicon.ico>
    <title>Control de asistencia y tareas</title>
    <link href=./css/app.e14d2c5b.css rel=preload as=style>
    <link href=./css/chunk-vendors.1e644a5e.css rel=preload as=style>
    <link href=./js/app.99bc57bc.js rel=preload as=script>
    <link href=./js/chunk-vendors.7c67a9b5.js rel=preload as=script>
    <link href=./css/chunk-vendors.1e644a5e.css rel=stylesheet>
    <link href=./css/app.e14d2c5b.css rel=stylesheet>
</head>

<body><noscript><strong>We're sorry but control-asistencias-tareas doesn't work properly without JavaScript enabled.
            Please enable it to continue.</strong></noscript>
    <div id=app></div>
    <script src=./js/chunk-vendors.7c67a9b5.js></script>
    <script src=./js/app.99bc57bc.js></script>
</body>

</html>

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/