Modo hash, modo historia y deploy

• Quizás si te digo "modo hash" no sepas de qué estoy hablando, pero ha sido el método por defecto para enrutar en el cliente y es muy común encontrarlo en las primeras versiones de aplicaciones SPA. En base se trata de utilizar el hash "#" y simular una URL completa para evitar que la aplicación se recargue cuando cambiemos la URL.
• El Vue Router el modo por defecto no es hash sino history. Con este modo conseguimos el mismo resultado sin tener que añadir un extraño hash a nuestra URL.
• En Vue Router la propiedad mode es la que gestiona si usamos modo hash o modo historia.

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  ...
});

• El modo hash usa la API de navegador pushSate ampliamente aceptada hoy en día. El único pero es que requiere una configuración especial en el servidor donde vaya a ser alojada la aplicación. En la documentación oficial se indica cómo configurar los servidores Web más comunes.
• En nuestro caso vamos a utilizar las condiciones de deploy más típicas posibles, desplegando en Linux con Apache vía FTP, en un subdirectorio llamado /router.
• Como se indica en la documentación debemos indicar a Apache vía archivo .htaccess (para Apache) las condiciones del despliegue. Podemos guardar este archivo en el directorio /public de nuestro proyecto, así Webpack lo copiará al directorio de salida en el proceso de compilación.
• Si Webpack en especial o module bundling en general son algo borroso para ti, no te preocupes, en Escuela Vue tienes un curso de Webpack.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /router
  RewriteRule ^router/index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /router/index.html [L]
</IfModule>

• También debemos cambiar el valor de la propiedad publicPath a través de un archivo de configuración vue.config.js.

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/router/" : "/",
};

• Ahora, tras lanzar una tarea build podemos desplegar el resultado a nuestro subdirectorio dist y comprobar que funciona.
• Como indica en la documentación, hay otro problema: como redirigimos todo a index.html, no podemos operar cuando se produce un error 404. Solucionar es tan sencillo como añadir una ruta catch all con un asterisco * y asociarla a un nuevo componente que muestre un mensaje de error.

{ path: "*", component: NotFound }