Vite Config

La funcion defineConfig recibe unos parametros para saber en que entorno de trabajo estamos. Yo lo uso para compilar diferentes estrategias. Abajo dejo un ejemplo:

import { defineConfig, splitVendorChunkPlugin } from 'vite'
import react from '@vitejs/plugin-react'
const path = require('path')

function getAliases() {
  return {
    '@api': path.resolve(__dirname, './src/main/services/api'),
    '@assets': path.resolve(__dirname, './src/library/assets'),
    '@components': path.resolve(__dirname, './src/library/components'),
    '@pages': path.resolve(__dirname, './src/pages'),
    '@services': path.resolve(__dirname, './src/main/services'),
  }
}

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  if (command === 'serve' && mode === 'development') {
    return {
      // dev specific config
      plugins: [react()],
      resolve: {
        alias: getAliases(),
      },
    }
  } else {
    // command === 'build' && mode === 'production'
    return {
      // build specific config
      plugins: [react(), splitVendorChunkPlugin()],
      build: {
        outDir: 'build',
        chunkSizeWarningLimit: 1000,
        minify: 'esbuild',
      },
      resolve: {
        alias: getAliases(),
      },
    }
  }
})

Resumen de la clase:
Vite viene configurado para que no tengas que hacerlo tu pero puedes configurar de forma manual.
Podemos configurar:

• La carpeta raíz del proyecto.
• La url base
• El modo ( desarrollo o producción)
• Uso de pluggins.
• El servidor en modo desarrollo
• El build

Una forma de trabajar:

/** @type {import('vite').UserConfig} */
export default {
    server:{
        port: 3000
    }
}

Otra forma de trabajo:

import { defineConfig } from 'vite'
/** @type {import('vite').UserConfig} */
export default defineConfig({
    server:{
        port: 3000
    }
})

Una tercera forma de trabajo:

import { defineConfig } from 'vite'
/** @type {import('vite').UserConfig} */
export default defineConfig(()=>{
    const port = 3000;

    return {
        server:{
            port
        }
    }
})

Muchas gracias profe Diana! Con esta clase pude configurar mi Laravel + Vite para poder generar un entorno de desarrollo usando una conexión segura SSL, para poder habilitar la opción de navigator.clipboard (que se ejecuta en modo seguro). Comparto mi configuración de Laravel + Vite a continuación.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

import fs from 'fs'; 
const host = 'appweb.test'; // Local development host

export default defineConfig({

    server: { 
        host, 
        hmr: { host },
        https: { 
            key: fs.readFileSync(`C:/laragon/etc/ssl/laragon.key`), // [!tl add]
            cert: fs.readFileSync(`C:/laragon/etc/ssl/laragon.crt`), // [!tl add]
        }, 
    },

    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

En caso de que quieran utilizar TS en React, no olviden descargar: @types/node con $npm i -D @types/node.
ㅤ
Y también actualizar su archivo tsconfig.json con los paths que agregaron en vite.config.ts.
ㅤ
Debería quedar algo como lo siguiente:
Ya nada más agregan o eliminan las rutas que necesiten.

vite.config.ts

import * as path from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src/') },
      { find: '@assets', replacement: path.resolve(__dirname, 'src/assets') },
      { find: '@components', replacement: path.resolve(__dirname, 'src/components') },
      { find: '@hooks', replacement: path.resolve(__dirname, 'src/hooks') },
      { find: '@pages', replacement: path.resolve(__dirname, 'src/pages') },
      { find: '@styles', replacement: path.resolve(__dirname, 'src/styles') },
      { find: '@utils', replacement: path.resolve(__dirname, 'src/utils') },
    ],
  },
})

tsconfig.json

{
  "compilerOptions": {
    // "baseUrl": "src",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "types": [
      "node"
    ],
    "paths": {
      "@*": [
        "./src/*"
      ],
      "assets/*": [
        "./src/assets/*"
      ],
      "components/*": [
        "./src/components/*"
      ],
      "hooks/*": [
        "./src/hooks/*"
      ],
      "pages/*": [
        "./src/pages/*"
      ],
      "styles/*": [
        "./src/styles/*"
      ],
      "utils/*": [
        "./src/utils/*"
      ]
    }
  },
  "include": [
    "src"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ],
}

Para los que quieran ver rápido la info:

Configurando Vite

Al ejecutar vite desde la línea de comandos, Vite intentará automáticamente resolver un archivo de configuración llamado vite.config.js dentro de la raíz del proyecto (también se admiten otras extensiones de JS y TS).

El archivo de configuración más básico se ve así:

// vite.config.js
export default {
  // opciones de configuración
}

Ten en cuenta que Vite admite el uso de la sintaxis de los módulos ES en el archivo de configuración, incluso si el proyecto no utiliza ESM de nodo nativo, por ejemplo type: “module” en el package.json. En este caso, el archivo de configuración se preprocesa automáticamente antes de cargarlo.

También puedes especificar explícitamente un archivo de configuración para usar con la opción CLI --config (resuelta relativa a cwd):

vite --config my-config.js

Configuración de Intellisense

Dado que Vite se distribuye con tipados de TypeScript, puedes aprovechar el intellisense de tu IDE con sugerencias de tipo jsdoc:

/** @type {import('vite').UserConfig} */
export default {
  // ...
}

Alternativamente, puedes usar el helper defineConfig que debería proporcionar intellisense sin necesidad de anotaciones jsdoc:

import { defineConfig } from 'vite'

export default defineConfig({
  // ...
})

Vite también es compatible directamente con los archivos de configuración de TypeScript. También puedes usar vite.config.ts con el helper defineConfig.

Configuración condicional

Si la configuración necesita determinar condicionalmente las opciones basadas en el comando (dev/serve o build), el modo que se está utilizando, o si es una compilación SSR (ssrBuild), puedes exportar una función en su lugar:

export default defineConfig(({ command, mode }) => {
  if (command === 'serve') {
    return {
      // configuración de desarrollo específico
    }
  } else {
    // command === 'build'
    return {
      // configuración de compilación específico
    }
  }
})

Es importante tener en cuenta que en la API de Vite, el valor de command es serve durante el desarrollo (en el cli vite, vite dev y vite serve son alias) y build cuando se compila para producción (vite build).

ssrBuild es experimental. Solo está disponible durante la compilación en lugar de un indicador ssr más general porque, durante el desarrollo, la configuración es compartida por el servidor único que maneja las solicitudes SSR y no SSR. El valor podría ser undefined para las herramientas que no tienen comandos separados para el navegador y la compilación de SSR, así que usa una comparación explícita con true y false.

Configuración de funciones asíncronas

Si la configuración necesita llamar a funciones asíncronas, puedes exportar una función asíncrona en su lugar. Y esta función asíncrona puede ser pasada como defineConfig para mejorar el soporte intellisense.

export default defineConfig(async ({ command, mode }) => {
  const data = await asyncFunction()
  return {
    // configuración de vite
  }
})

Utilizando variables de entorno en Configuración

Las variables de ambiente se pueden obtener de process.env como de costumbre.

Ten en cuenta que Vite no carga archivos .env de forma predeterminada, ya que los archivos que se cargarán solo se pueden determinar después de evaluar la configuración de Vite, por ejemplo, las opciones root y envDir afectan el comportamiento de carga. Sin embargo, puedes usar el helper loadEnv exportado para cargar el archivo .env específico si es necesario.

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // Carga el archivo env basado en el `modo` en el directorio de trabajo actual.
  // Coloca el tercer parámetro en '' para cargar todos los env independientemente del prefijo `VITE_`.
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // configuración de vite
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})

Estoy muy contento con la evolución de Diana como profesora … sin decir que los cursos anteriores fueran malos, de hecho son muy buenos, pero ahora la veo desenvolviéndose mucho mejor. Ahora con respecto a este curso en específico … personalemente Vite es lo mejor que he usado, sobre todo a la hora de trabajar con Vue, es rápido, sencillo y tiene un ecosistema cada vez más completo, vitest por ejemplo