Laravel und Vite in einem Docker-Container ⇐ JavaScript

[Anonymous]

Ich versuche, ein Laravel-Projekt zu containerisieren, auf dem Vue ausgeführt wird, da Webpack jetzt kein Standard ist und Vite bereits ein Standard ist. Damit ich Vite ausführen kann, wird es dann aktualisiert, wenn sich etwas im Projekt geändert hat.
Ich habe npm in einem anderen Dienst ausgeführt, dieser wird nur bei Bedarf ausgeführt und wenn ich npm run dev ausführe, startet der Vite-Entwicklungsserver, was großartig ist, aber ich finde, dass er nichts bemerkt.
meine Docker-Compose-Datei ist:

Code: Select all

ervices:
nginx:
#image: nginx:stable-apline
build:
context: .
ports:
- 80:80
volumes:
- ./src:/var/www/html

depends_on:
- mysql
- php
mysql:
image: mariadb:10.5.8
ports:
- 3306:3306
environment:
MYSQL_DATABASE: laravel
MYSQL_USER: laravel
MYSQL_PASSWORD: secret
MYSQL_ROOT_PASSWORD: secret
volumes:
- ./mysql:/var/lib/mysql

php:
build:
context: .
dockerfile: php.dockerfile
volumes:
- ./src:/var/www/html

composer:
build:
context: .
dockerfile: composer.dockerfile
volumes:
- ./src:/var/www/html
working_dir: /var/www/html

node:
image: node:current-alpine
volumes:
- ./src:/var/www/html
entrypoint: ["npm"]
working_dir: /var/www/html

Wenn mein Nginx-Container ausgeführt wird, erhalte ich Folgendes in der Konsole:


Meine Vite-Konfiguration lautet wie folgt:

Code: Select all

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

export default defineConfig({
server: {
strictPort: true,
port: 5173,
host: '127.0.0.1',
origin: 'http://localhost:5173',
hmr: {
host: 'localhost',
},
watch: {
usePolling: true
}
},
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
tailwindcss(),
vue()
]
});

das ist willkommen.blade.php

Code: Select all

{{ config('app.name', 'Laravel') }}






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

Die app.js-Datei:

Code: Select all

import './bootstrap';

import {createApp} from "vue/dist/vue.esm-bundler.js";
import HomeComponent from "./components/HomeComponent.vue";

const app = createApp({});

app.component('HomeComponent', HomeComponent);

app.mount('#app');

Die Konsolenfehler werden nur dann nicht angezeigt, wenn ich die Hot-Datei unter „Öffentlich“ lösche, meine Komponente aber immer noch nicht angezeigt wird.
Irgendwelche Gedanken?