Vite Config

Con el archivo vite.config.js podremos tomar el control de todo lo que hace Vite y poder reescribir sus configuraciones por defecto, desde cambiar la carpeta, raíz del proyecto, configuraciones al servidor, uso de plugins, opciones para el build, entre muchas más.

Configurando Vite

Para empezar a configurar el comportamiento de Vite tendríamos que crear en la raíz del proyecto un archivo con el nombre de vite.config.js. Te recomiendo visitar la documentación oficial de Vite en la parte de config para ver todas las configuraciones disponibles. Este es el enlace.

1 método de configuración

Existen varias formas de configurar Vite, la más sencilla es exportando un JSON. En este caso podríamos configurar las opciones del servidor, empezando por cambiar el puerto donde se ejecuta nuestro proyecto. Como puedes ver mi proyecto está corriendo en el puerto 5173.

Ahora abrimos las opciones de server y dentro de este escribimos la opción port, en esta opción podrás definir un nuevo puerto como el 8080.

export default {
  server: {
    port: 8080,
  },
};

Como podrás ver estamos retornando un JSON y ahora nuestro proyecto corre en un puerto diferente.

2 método de configuración

En algunas ocasiones puede que necesites hacer algo mas complejo, por ejemplo usar TS, para esto Vite nos ofrece otro método de configuración, uno donde el código en TS es autocompletado.

Este método es empleando defineConfig, una función importada desde Vite. Solo debes de exportar la función y dentro de esta tu configuración en un formato JSON.

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    port: 8080,
  },
});

Como podrás ver, con este método nuestra configuración también es válida. Pero también a cambio de pasar el JSON, podemos pasar una función con variables, funciones y otra lógica bastante útil.

import { defineConfig } from "vite";

export default defineConfig(() => {
  const port = 8080;
  
  return {
    server: { port },
  };
});

En el ejemplo anterior estamos pasando un arrow function y dentro de esta retornamos nuestra configuración, pero si observamos no estamos definiendo el puerto directamente en el JSON, sino que lo estamos definiendo en una variable.

Contribución creada por: Jofay Zhan Segura