Agrupación de recursos (Vite)

• Introducción
• Instalación y Configuración
  • Instalando Node
  • Instalando Vite y el Plugin de Laravel
  • Configurando Vite
  • Cargando sus Scripts y Estilos
• Ejecutando Vite
• Trabajando con JavaScript
  • Aliases
  • Vue
  • React
  • Inertia
  • Procesamiento de URLs
• Trabajando con Hojas de Estilo
• Trabajando con Blade y Rutas
  • Procesando Recursos Estáticos con Vite
  • Refrescando al Guardar
  • Aliases
• URLs Base Personalizadas
• Variables de Entorno
• Deshabilitando Vite en Tests
• Renderizado del Lado del Servidor (SSR)
• Atributos en Etiquetas de Script y Estilo
  • Nonce para Content Security Policy (CSP)
  • Integridad de Subrecursos (SRI)
  • Atributos Arbitrarios
• Personalización Avanzada
  • Corrección de URLs del Servidor de Desarrollo

#Introducción

Vite es una herramienta moderna de construcción frontend que ofrece un entorno de desarrollo extremadamente rápido y agrupa su código para producción. Al construir aplicaciones con Laravel, normalmente usará Vite para agrupar los archivos CSS y JavaScript de su aplicación en recursos listos para producción.

Laravel se integra perfectamente con Vite proporcionando un plugin oficial y una directiva Blade para cargar sus recursos tanto en desarrollo como en producción.

#Elegir entre Vite y Laravel Mix

Antes de la transición a Vite, las nuevas aplicaciones Laravel utilizaban Mix, que está basado en webpack, para agrupar recursos. Vite se enfoca en ofrecer una experiencia más rápida y productiva al construir aplicaciones JavaScript ricas. Si está desarrollando una Aplicación de Página Única (SPA), incluyendo aquellas desarrolladas con herramientas como Inertia, Vite será la opción ideal.

Vite también funciona bien con aplicaciones tradicionales renderizadas del lado del servidor con "toques" de JavaScript, incluyendo aquellas que usan Livewire. Sin embargo, carece de algunas características que Laravel Mix soporta, como la capacidad de copiar recursos arbitrarios al build que no están referenciados directamente en su aplicación JavaScript.

#Migrar de nuevo a Mix

¿Ha comenzado una nueva aplicación Laravel usando nuestro scaffolding de Vite pero necesita volver a Laravel Mix y webpack? No hay problema. Por favor consulte nuestra guía oficial para migrar de Vite a Mix.

#Instalación y Configuración

#Instalando Node

Debe asegurarse de que Node.js (16+) y NPM estén instalados antes de ejecutar Vite y el plugin de Laravel:

node -v
npm -v

Puede instalar fácilmente la última versión de Node y NPM usando instaladores gráficos simples desde el sitio oficial de Node. O, si está usando Laravel Sail, puede invocar Node y NPM a través de Sail:

./vendor/bin/sail node -v
./vendor/bin/sail npm -v

#Instalando Vite y el Plugin de Laravel

Dentro de una instalación fresca de Laravel, encontrará un archivo package.json en la raíz de la estructura de directorios de su aplicación. El archivo package.json por defecto ya incluye todo lo necesario para comenzar a usar Vite y el plugin de Laravel. Puede instalar las dependencias frontend de su aplicación vía NPM:

npm install

#Configurando Vite

Vite se configura mediante un archivo vite.config.js en la raíz de su proyecto. Puede personalizar este archivo según sus necesidades, y también puede instalar cualquier otro plugin que su aplicación requiera, como @vitejs/plugin-vue o @vitejs/plugin-react.

El plugin Laravel Vite requiere que especifique los puntos de entrada para su aplicación. Estos pueden ser archivos JavaScript o CSS, e incluyen lenguajes preprocesados como TypeScript, JSX, TSX y Sass.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Si está construyendo una SPA, incluyendo aplicaciones construidas con Inertia, Vite funciona mejor sin puntos de entrada CSS:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

En cambio, debería importar su CSS vía JavaScript. Normalmente, esto se haría en el archivo resources/js/app.js de su aplicación:

import './bootstrap';
import '../css/app.css';

El plugin Laravel también soporta múltiples puntos de entrada y opciones avanzadas de configuración como los puntos de entrada SSR.

#Trabajando con un Servidor de Desarrollo Seguro

Si su servidor web local de desarrollo está sirviendo su aplicación vía HTTPS, puede tener problemas para conectarse al servidor de desarrollo de Vite.

Si está usando Laravel Herd y ha asegurado el sitio o está usando Laravel Valet y ha ejecutado el comando secure contra su aplicación, el plugin Laravel Vite detectará automáticamente y usará el certificado TLS generado por usted.

Si aseguró el sitio usando un host que no coincide con el nombre del directorio de la aplicación, puede especificar manualmente el host en el archivo vite.config.js de su aplicación:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            // ...
            detectTls: 'my-app.test',
        }),
    ],
});

Al usar otro servidor web, debe generar un certificado confiable y configurar manualmente Vite para usar los certificados generados:

// ...
import fs from 'fs';

const host = 'my-app.test';

export default defineConfig({
    // ...
    server: {
        host,
        hmr: { host },
        https: {
            key: fs.readFileSync(`/path/to/${host}.key`),
            cert: fs.readFileSync(`/path/to/${host}.crt`),
        },
    },
});

Si no puede generar un certificado confiable para su sistema, puede instalar y configurar el plugin @vitejs/plugin-basic-ssl. Al usar certificados no confiables, deberá aceptar la advertencia del certificado para el servidor de desarrollo de Vite en su navegador siguiendo el enlace "Local" en su consola al ejecutar el comando npm run dev.

#Ejecutando el Servidor de Desarrollo en Sail sobre WSL2

Al ejecutar el servidor de desarrollo Vite dentro de Laravel Sail en Windows Subsystem for Linux 2 (WSL2), debe agregar la siguiente configuración a su archivo vite.config.js para asegurar que el navegador pueda comunicarse con el servidor de desarrollo:

// ...

export default defineConfig({
    // ...
    server: {
        hmr: {
            host: 'localhost',
        },
    },
});

Si los cambios en sus archivos no se reflejan en el navegador mientras el servidor de desarrollo está corriendo, también puede necesitar configurar la opción server.watch.usePolling de Vite.

#Cargando sus Scripts y Estilos

Con sus puntos de entrada Vite configurados, ahora puede referenciarlos en una directiva Blade @vite() que agregue en la etiqueta <head> de la plantilla raíz de su aplicación:

<!doctype html>
<head>
    {{-- ... --}}

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Si está importando su CSS vía JavaScript, solo necesita incluir el punto de entrada JavaScript:

<!doctype html>
<head>
    {{-- ... --}}

    @vite('resources/js/app.js')
</head>

La directiva @vite detectará automáticamente el servidor de desarrollo Vite e inyectará el cliente Vite para habilitar Hot Module Replacement. En modo build, la directiva cargará sus recursos compilados y versionados, incluyendo cualquier CSS importado.

Si es necesario, también puede especificar la ruta de build de sus recursos compilados al invocar la directiva @vite:

<!doctype html>
<head>
    {{-- Given build path is relative to public path. --}}

    @vite('resources/js/app.js', 'vendor/courier/build')
</head>

#Recursos Inline

A veces puede ser necesario incluir el contenido bruto de los recursos en lugar de enlazar a la URL versionada del recurso. Por ejemplo, puede necesitar incluir contenido de recursos directamente en su página al pasar contenido HTML a un generador de PDF. Puede mostrar el contenido de los recursos Vite usando el método content proporcionado por la fachada Vite:

@php
use Illuminate\Support\Facades\Vite;
@endphp

<!doctype html>
<head>
    {{-- ... --}}

    <style>
        {!! Vite::content('resources/css/app.css') !!}
    </style>
    <script>
        {!! Vite::content('resources/js/app.js') !!}
    </script>
</head>

#Ejecutando Vite

Hay dos formas de ejecutar Vite. Puede ejecutar el servidor de desarrollo con el comando dev, que es útil durante el desarrollo local. El servidor de desarrollo detectará automáticamente cambios en sus archivos y los reflejará instantáneamente en cualquier ventana de navegador abierta.

O, ejecutar el comando build versionará y agrupará los recursos de su aplicación y los preparará para que los despliegue en producción:

# Ejecutar el servidor de desarrollo Vite...
npm run dev

# Construir y versionar los recursos para producción...
npm run build

Si está ejecutando el servidor de desarrollo en Sail sobre WSL2, puede necesitar algunas opciones de configuración adicional.

#Trabajando con JavaScript

#Aliases

Por defecto, el plugin Laravel proporciona un alias común para ayudarle a comenzar rápidamente e importar convenientemente los recursos de su aplicación:

{
    '@' => '/resources/js'
}

Puede sobrescribir el alias '@' añadiendo el suyo propio en el archivo de configuración vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel(['resources/ts/app.tsx']),
    ],
    resolve: {
        alias: {
            '@': '/resources/ts',
        },
    },
});

#Vue

Si desea construir su frontend usando el framework Vue, también necesitará instalar el plugin @vitejs/plugin-vue:

npm install --save-dev @vitejs/plugin-vue

Luego puede incluir el plugin en su archivo de configuración vite.config.js. Hay algunas opciones adicionales que necesitará al usar el plugin Vue con Laravel:

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

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.js']),
        vue({
            template: {
                transformAssetUrls: {
                    // El plugin Vue reescribirá las URLs de recursos, cuando se referencien
                    // en Componentes de Archivo Único, para apuntar al servidor web de Laravel.
                    // Configurar esto a `null` permite que el plugin Laravel
                    // reescriba las URLs de recursos para apuntar al servidor Vite en su lugar.
                    base: null,

                    // El plugin Vue analizará URLs absolutas y las tratará
                    // como rutas absolutas a archivos en disco. Configurar esto a
                    // `false` dejará las URLs absolutas sin tocar para que puedan
                    // referenciar recursos en el directorio public como se espera.
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

#React

Si desea construir su frontend usando el framework React, también necesitará instalar el plugin @vitejs/plugin-react:

npm install --save-dev @vitejs/plugin-react

Luego puede incluir el plugin en su archivo de configuración vite.config.js:

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

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.jsx']),
        react(),
    ],
});

Debe asegurarse de que cualquier archivo que contenga JSX tenga una extensión .jsx o .tsx, recordando actualizar su punto de entrada, si es necesario, como se muestra más arriba.

También deberá incluir la directiva Blade adicional @viteReactRefresh junto con su directiva @vite existente.

@viteReactRefresh
@vite('resources/js/app.jsx')

La directiva @viteReactRefresh debe llamarse antes de la directiva @vite.

#Inertia

El plugin Laravel Vite proporciona una función conveniente resolvePageComponent para ayudarle a resolver sus componentes de página Inertia. A continuación hay un ejemplo del helper en uso con Vue 3; sin embargo, también puede utilizar la función en otros frameworks como React:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

createInertiaApp({
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
});

#Procesamiento de URLs

Al usar Vite y referenciar recursos en el HTML, CSS o JS de su aplicación, hay un par de consideraciones. Primero, si referencia recursos con una ruta absoluta, Vite no incluirá el recurso en el build; por lo tanto, debe asegurarse de que el recurso esté disponible en su directorio public.

Al referenciar rutas relativas de recursos, debe recordar que las rutas son relativas al archivo donde se referencian. Cualquier recurso referenciado vía ruta relativa será reescrito, versionado y agrupado por Vite.

Considere la siguiente estructura de proyecto:

public/
  taylor.png
resources/
  js/
    Pages/
      Welcome.vue
  images/
    abigail.png

El siguiente ejemplo demuestra cómo Vite tratará URLs relativas y absolutas:

<!-- Este recurso no es manejado por Vite y no será incluido en el build -->
<img src="/taylor.png">

<!-- Este recurso será reescrito, versionado y agrupado por Vite -->
<img src="../../images/abigail.png">

#Trabajando con Hojas de Estilo

Puede aprender más sobre el soporte CSS de Vite en la documentación de Vite. Si está usando plugins PostCSS como Tailwind, puede crear un archivo postcss.config.js en la raíz de su proyecto y Vite lo aplicará automáticamente:

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

#Trabajando con Blade y Rutas

#Procesando Recursos Estáticos con Vite

Al referenciar recursos en su JavaScript o CSS, Vite los procesa y versiona automáticamente. Además, al construir aplicaciones basadas en Blade, Vite también puede procesar y versionar recursos estáticos que solo referencia en plantillas Blade.

Sin embargo, para lograr esto, debe hacer que Vite conozca sus recursos importando los recursos estáticos en el punto de entrada de la aplicación. Por ejemplo, si desea procesar y versionar todas las imágenes almacenadas en resources/images y todas las fuentes almacenadas en resources/fonts, debe agregar lo siguiente en el punto de entrada resources/js/app.js de su aplicación:

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

Estos recursos ahora serán procesados por Vite al ejecutar npm run build. Luego puede referenciar estos recursos en plantillas Blade usando el método Vite::asset, que devolverá la URL versionada para un recurso dado:

<img src="{{ Vite::asset('resources/images/logo.png') }}">

#Refrescando al Guardar

Cuando su aplicación está construida usando renderizado tradicional del lado del servidor con Blade, Vite puede mejorar su flujo de trabajo de desarrollo refrescando automáticamente el navegador cuando realiza cambios en archivos de vistas en su aplicación. Para comenzar, simplemente puede especificar la opción refresh como true.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: true,
        }),
    ],
});

Cuando la opción refresh es true, guardar archivos en los siguientes directorios hará que el navegador realice una recarga completa de la página mientras ejecuta npm run dev:

• app/View/Components/**
• lang/**
• resources/lang/**
• resources/views/**
• routes/**

Observar el directorio routes/** es útil si está utilizando Ziggy para generar enlaces de rutas dentro del frontend de su aplicación.

Si estas rutas por defecto no se ajustan a sus necesidades, puede especificar su propia lista de rutas a observar:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: ['resources/views/**'],
        }),
    ],
});

Internamente, el plugin Laravel Vite usa el paquete vite-plugin-full-reload, que ofrece algunas opciones avanzadas de configuración para afinar el comportamiento de esta característica. Si necesita este nivel de personalización, puede proporcionar una definición config:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: [{
                paths: ['path/to/watch/**'],
                config: { delay: 300 }
            }],
        }),
    ],
});

#Aliases

Es común en aplicaciones JavaScript crear aliases para directorios referenciados regularmente. Pero también puede crear aliases para usar en Blade usando el método macro en la clase Illuminate\Support\Facades\Vite. Normalmente, las "macros" deben definirse dentro del método boot de un service provider:

/**
 * Inicializar cualquier servicio de la aplicación.
 */
public function boot(): void
{
    Vite::macro('image', fn (string $asset) => $this->asset("resources/images/{$asset}"));
}

Una vez que una macro ha sido definida, puede invocarse dentro de sus plantillas. Por ejemplo, podemos usar la macro image definida arriba para referenciar un recurso ubicado en resources/images/logo.png:

<img src="{{ Vite::image('logo.png') }}" alt="Laravel Logo">

#URLs Base Personalizadas

Si sus recursos compilados por Vite se despliegan en un dominio separado de su aplicación, como a través de un CDN, debe especificar la variable de entorno ASSET_URL en el archivo .env de su aplicación:

ASSET_URL=https://cdn.example.com

Después de configurar la URL de recursos, todas las URLs reescritas a sus recursos tendrán el prefijo con el valor configurado:

https://cdn.example.com/build/assets/app.9dce8d17.js

Recuerde que las URLs absolutas no son reescritas por Vite, por lo que no tendrán prefijo.

#Variables de Entorno

Puede inyectar variables de entorno en su JavaScript prefijándolas con VITE_ en el archivo .env de su aplicación:

VITE_SENTRY_DSN_PUBLIC=http://example.com

Puede acceder a las variables de entorno inyectadas a través del objeto import.meta.env:

import.meta.env.VITE_SENTRY_DSN_PUBLIC

#Deshabilitando Vite en Tests

La integración de Vite en Laravel intentará resolver sus recursos mientras ejecuta sus tests, lo que requiere que ejecute el servidor de desarrollo Vite o que construya sus recursos.

Si prefiere simular Vite durante las pruebas, puede llamar al método withoutVite, que está disponible para cualquier test que extienda la clase TestCase de Laravel:

use Tests\TestCase;

class ExampleTest extends TestCase
{
    public function test_without_vite_example(): void
    {
        $this->withoutVite();

        // ...
    }
}

Si desea deshabilitar Vite para todos los tests, puede llamar al método withoutVite desde el método setUp en su clase base TestCase:

<?php

namespace Tests;

use Illuminate\Foundation\Testing\TestCase as BaseTestCase;

abstract class TestCase extends BaseTestCase
{
    use CreatesApplication;

    protected function setUp(): void
    {
        parent::setUp();

        $this->withoutVite();
    }
}

#Renderizado del Lado del Servidor (SSR)

El plugin Laravel Vite facilita la configuración del renderizado del lado del servidor con Vite. Para comenzar, cree un punto de entrada SSR en resources/js/ssr.js y especifique el punto de entrada pasando una opción de configuración al plugin Laravel:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
        }),
    ],
});

Para asegurarse de no olvidar reconstruir el punto de entrada SSR, recomendamos ampliar el script "build" en el package.json de su aplicación para crear su build SSR:

"scripts": {
     "dev": "vite",
     "build": "vite build"
     "build": "vite build && vite build --ssr"
}

Luego, para construir y arrancar el servidor SSR, puede ejecutar los siguientes comandos:

npm run build
node bootstrap/ssr/ssr.js

Si está usando SSR con Inertia, puede usar en su lugar el comando Artisan inertia:start-ssr para arrancar el servidor SSR:

php artisan inertia:start-ssr

#Atributos en Etiquetas de Script y Estilo

#Nonce para Content Security Policy (CSP)

Si desea incluir un nonce attribute en sus etiquetas de script y estilo como parte de su Content Security Policy, puede generar o especificar un nonce usando el método useCspNonce dentro de un middleware personalizado:

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Vite;
use Symfony\Component\HttpFoundation\Response;

class AddContentSecurityPolicyHeaders
{
    /**
     * Manejar una solicitud entrante.
     *
     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
     */
    public function handle(Request $request, Closure $next): Response
    {
        Vite::useCspNonce();

        return $next($request)->withHeaders([
            'Content-Security-Policy' => "script-src 'nonce-".Vite::cspNonce()."'",
        ]);
    }
}

Después de invocar el método useCspNonce, Laravel incluirá automáticamente los atributos nonce en todas las etiquetas de script y estilo generadas.

Si necesita especificar el nonce en otro lugar, incluyendo la directiva Ziggy @route incluida en los starter kits de Laravel, puede obtenerlo usando el método cspNonce:

@routes(nonce: Vite::cspNonce())

Si ya tiene un nonce que desea que Laravel use, puede pasarlo al método useCspNonce:

Vite::useCspNonce($nonce);

#Integridad de Subrecursos (SRI)

Si su manifiesto Vite incluye hashes de integrity para sus recursos, Laravel agregará automáticamente el atributo integrity en cualquier etiqueta de script y estilo que genere para hacer cumplir la Integridad de Subrecursos. Por defecto, Vite no incluye el hash integrity en su manifiesto, pero puede habilitarlo instalando el plugin NPM vite-plugin-manifest-sri:

npm install --save-dev vite-plugin-manifest-sri

Luego puede habilitar este plugin en su archivo vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import manifestSRI from 'vite-plugin-manifest-sri';

export default defineConfig({
    plugins: [
        laravel({
            // ...
        }),
        manifestSRI(),
    ],
});

Si es necesario, también puede personalizar la clave del manifiesto donde se encuentra el hash de integridad:

use Illuminate\Support\Facades\Vite;

Vite::useIntegrityKey('custom-integrity-key');

Si desea deshabilitar completamente esta auto-detección, puede pasar false al método useIntegrityKey:

Vite::useIntegrityKey(false);

#Atributos Arbitrarios

Si necesita incluir atributos adicionales en sus etiquetas de script y estilo, como el atributo data-turbo-track, puede especificarlos mediante los métodos useScriptTagAttributes y useStyleTagAttributes. Normalmente, estos métodos deben invocarse desde un service provider:

use Illuminate\Support\Facades\Vite;

Vite::useScriptTagAttributes([
    'data-turbo-track' => 'reload', // Especificar un valor para el atributo...
    'async' => true, // Especificar un atributo sin valor...
    'integrity' => false, // Excluir un atributo que de otro modo se incluiría...
]);

Vite::useStyleTagAttributes([
    'data-turbo-track' => 'reload',
]);

Si necesita agregar atributos condicionalmente, puede pasar un callback que recibirá la ruta fuente del recurso, su URL, su chunk en el manifiesto y el manifiesto completo:

use Illuminate\Support\Facades\Vite;

Vite::useScriptTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [
    'data-turbo-track' => $src === 'resources/js/app.js' ? 'reload' : false,
]);

Vite::useStyleTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [
    'data-turbo-track' => $chunk && $chunk['isEntry'] ? 'reload' : false,
]);

#Personalización Avanzada

Por defecto, el plugin Laravel Vite usa convenciones sensatas que deberían funcionar para la mayoría de las aplicaciones; sin embargo, a veces puede necesitar personalizar el comportamiento de Vite. Para habilitar opciones de personalización adicionales, ofrecemos los siguientes métodos y opciones que pueden usarse en lugar de la directiva Blade @vite:

<!doctype html>
<head>
    {{-- ... --}}

    {{
        Vite::useHotFile(storage_path('vite.hot')) // Personalizar el archivo "hot"...
            ->useBuildDirectory('bundle') // Personalizar el directorio de build...
            ->useManifestFilename('assets.json') // Personalizar el nombre del archivo manifest...
            ->withEntryPoints(['resources/js/app.js']) // Especificar los puntos de entrada...
            ->createAssetPathsUsing(function (string $path, ?bool $secure) { // Personalizar la generación de rutas backend para recursos compilados...
                return "https://cdn.example.com/{$path}";
            })
    }}
</head>

Dentro del archivo vite.config.js, debe especificar la misma configuración:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            hotFile: 'storage/vite.hot', // Personalizar el archivo "hot"...
            buildDirectory: 'bundle', // Personalizar el directorio de build...
            input: ['resources/js/app.js'], // Especificar los puntos de entrada...
        }),
    ],
    build: {
      manifest: 'assets.json', // Personalizar el nombre del archivo manifest...
    },
});

#Corrección de URLs del Servidor de Desarrollo

Algunos plugins dentro del ecosistema Vite asumen que las URLs que comienzan con una barra diagonal siempre apuntarán al servidor de desarrollo Vite. Sin embargo, debido a la naturaleza de la integración con Laravel, este no es el caso.

Por ejemplo, el plugin vite-imagetools genera URLs como las siguientes mientras Vite está sirviendo sus recursos:

<img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">

El plugin vite-imagetools espera que la URL de salida sea interceptada por Vite y que el plugin pueda manejar todas las URLs que comienzan con /@imagetools. Si está usando plugins que esperan este comportamiento, necesitará corregir manualmente las URLs. Puede hacer esto en su archivo vite.config.js usando la opción transformOnServe.

En este ejemplo en particular, antepondremos la URL del servidor de desarrollo a todas las ocurrencias de /@imagetools dentro del código generado:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { imagetools } from 'vite-imagetools';

export default defineConfig({
    plugins: [
        laravel({
            // ...
            transformOnServe: (code, devServerUrl) => code.replaceAll('/@imagetools', devServerUrl+'/@imagetools'),
        }),
        imagetools(),
    ],
});

Ahora, mientras Vite está sirviendo recursos, generará URLs que apuntan al servidor de desarrollo Vite:

- <img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">
+ <img src="http://[::1]:5173/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">