Vite сборка CSS и JS

В настройках docker-compose.yml в сервисе FPM должен быть прописан дополнительный порт для websocketa что бы на нём запускался vite:

    fpm:
        build:
            context: .
            dockerfile: docker/Fpm.dockerfile
        volumes:
            -   ./:/var/www/laravel-docker # вся текущая папка пробрасывается в контейнер по пути /var/www/laravel-docker
            - type: "bind" # пробрасываем папку /tmp в систему по адресу /tmp (для сохранения логов и профайлов xdebug)
              source: "/tmp"
              target: "/tmp"
        links:
            -   mysql
        ports:
            - "9000:9000"
            - "3000:3000" # дополнительный порт для websocket/Vite

Устанавливаем все зависимости которые изначально прописаны в package.json

npm install

добавляем настройки порта в vite.config.js

vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    // Задаём настройки порта для соеденения vite
    server: {
        hmr: {
            host: 'localhost'
        },
        port: 3000,
        host: '0.0.0.0',
    },
});

Создаём файлы style.css и script.js

Импортируем style.css в app.css

app.css

@import "/resources/css/style.css";

Импортируем script.js в app.js

app.js

import './script';

Добавляем подключение js и css фалов в head блейд файла...

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

И запускаем команду сборки...

npm run build