Docker laravel 和 vue 无法工作：Vue 未被识别

Question

我有 Laravel 11 的 docker 容器，我已经按照官方文档的说明安装了 vue 依赖项。我遇到的问题是我的 vue 组件没有加载。我猛击到我运行的 laravel 容器

npm install

并且

npm run dev

它加载成功。当我单击 http://localhost:5173 时，我在页面上收到错误，就像它不起作用一样。

VITE v5.4.7 5458 毫秒内准备就绪

➜ 本地：http://localhost:5173/ ➜ 按 h + Enter 显示帮助

LARAVEL v11.23.5 插件 v1.0.5

➜ APP_URL：http://localhost:9000

这是我的配置文件。不知道做错了什么

Vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

JS 包

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

docker-compose.yml

version: '3.8'

services:
  laravel-docker:
    container_name: laravel-docker
    build: .
    volumes:
      - ./realtime:/var/www/html
    ports:
      - 9000:80  # Keeping 9000 for Laravel app
    environment:
      - REDIS_HOST=redis
      - REDIS_PORT=6379
    networks:
      - app-network

  mysql_db:
    image: mysql:latest
    container_name: mysql_db
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: rttm_db
    volumes:
      - "./db:/var/lib/mysql"  # Persist database data
    ports:
      - 3306:3306
    networks:
      - app-network

  phpmyadmin:
    image: phpmyadmin:latest
    container_name: phpmyadmin
    ports:
      - 9001:80
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=mysql_db
    networks:
      - app-network

  npm:
    image: node:current-alpine
    container_name: npm
    volumes:
      - ./realtime:/var/www/html
    user: node
    working_dir: /var/www/html
    entrypoint: ["npm", "install"]  # Install dependencies (or run other npm commands)
    networks:
      - app-network

  redis:
    image: redis:latest
    container_name: redis
    ports:
      - 6379:6379
    networks:
      - app-network
            
networks:
  app-network:
    driver: bridge

Dockerfile

FROM php:8.2-apache
WORKDIR /var/www/html

# Mod Rewrite
RUN a2enmod rewrite

# Linux Library
RUN apt-get update -y && apt-get install -y \
    libicu-dev \
    libmariadb-dev \
    unzip zip \
    zlib1g-dev \
    libpng-dev \
    libjpeg-dev \
    libfreetype6-dev \
    libjpeg62-turbo-dev \
    libpng-dev 

# Install PHP Zip extension
RUN apt-get update && apt-get install -y \
    libzip-dev \
    && docker-php-ext-install zip
# Install Redis    
RUN pecl install redis \
    && docker-php-ext-enable redis
# Composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

# PHP Extension
RUN docker-php-ext-install gettext intl pdo_mysql gd

RUN docker-php-ext-configure gd --enable-gd --with-freetype --with-jpeg \
    && docker-php-ext-install -j$(nproc) gd
# install curl 
RUN apt-get update -y && apt-get install -y curl

RUN apt-get update && apt-get install -y \
    software-properties-common \
    npm
RUN npm install npm@latest -g && \
    npm install n -g && \
    n latest

我希望 vue 组件能够正确显示

Answer 1

您需要为npm容器打开开发端口5173。

npm:
    image: node:current-alpine
    container_name: npm
    volumes:
      - ./realtime:/var/www/html
    user: node
    working_dir: /var/www/html
    entrypoint: ["npm", "install"]  # Install dependencies (or run other npm commands)
    ports:
          - 5173:5173
    networks:
      - app-network