Vite 资产捆绑器在使用 Inertia.js 和 Vue.js 构建 Laravel 应用程序的 Docker 构建过程中未捆绑所有文件

Question

我有一个 Laravel 应用程序，其前端使用 Inertia.js 和 Vue.js 构建，并且我使用 Vite 作为资产捆绑器。当我在本地运行

vite build

时，应用程序会正确捆绑，包括所有资产。然而，当我尝试为应用程序构建 Docker 镜像时，Vite 仅捆绑了

app.js

和

app.css

，而忽略了其余资产。

这里是资源文件夹树：

resources
├── css
│   └── app.css
├── images
│   └── logo.png
└── js
    ├── app.js
    └── pages
        └── Quote
            ├── Create.vue
            └── Show.vue

这里是预期的输出：

vite v4.4.7 building for production...
✓ 100 modules transformed.
public/build/manifest.json                                     1.24 kB │ gzip:  0.33 kB
public/build/assets/logo-fae5368c.png                      2,792.47 kB
public/build/assets/Show-4ec4a01e.css                          0.03 kB │ gzip:  0.05 kB
public/build/assets/app-c7d1a54e.css                           7.29 kB │ gzip:  2.23 kB
public/build/assets/Create-742e3950.js                         3.06 kB │ gzip:  1.20 kB
public/build/assets/Show-9b783249.js                           3.90 kB │ gzip:  1.71 kB
public/build/assets/app-4b5ce87a.js                          166.41 kB │ gzip: 59.79 kB
✓ built in 5.57s

这是使用 Docker 构建的当前结果：

vite v4.4.7 building for production...
✓ 95 modules transformed.
rendering chunks...
computing gzip size...
public/build/manifest.json              0.26 kB │ gzip:  0.13 kB
public/build/assets/app-179954eb.css    0.06 kB │ gzip:  0.06 kB
public/build/assets/app-1e574fbf.js   161.97 kB │ gzip: 57.94 kB
✓ built in 2.52s

这里

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/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

这里

Dockerfile

：

ARG composer_version=latest
ARG node_version=latest
ARG php_version=fpm

FROM php:$php_version as base

RUN \
    apt-get update \
    && apt-get install -y \
        libzip-dev \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/* \
    && docker-php-ext-install -j$(nproc) \
      exif \
      pdo_mysql \
      zip

RUN cp /usr/local/etc/php/php.ini-production /usr/local/etc/php/php.ini

WORKDIR /var/www/html

FROM composer:$composer_version as composer

FROM base as vendor

COPY --from=composer /usr/bin/composer /usr/local/bin/composer

COPY composer.json composer.lock ./

ARG nova_email
ARG nova_password

RUN \
    composer config --global http-basic.nova.laravel.com ${nova_email} ${nova_password} \
    && composer install \
        --no-autoloader \
        --no-dev \
        --no-interaction \
        --no-plugins \
        --no-scripts \
        --prefer-dist

COPY . .

RUN composer dumpautoload

FROM node:$node_version as build

WORKDIR /root

COPY \
    package.json \
    yarn.lock \
    vite.config.js \
    ./
COPY resources/js resources/js/
COPY resources/css resources/css/
COPY resources/images resources/images/

RUN \
  yarn --production \
  && yarn build

FROM base

LABEL org.opencontainers.image.source=https://github.com/...

COPY --from=vendor /var/www/html .

COPY --from=build /root/public/build public/build/

RUN php artisan nova:publish

RUN \
    chown www-data:www-data -R /var/www \
    && chmod ug+w -R /var/www/html/storage/

这是我尝试过的：

• 尝试在仅包含必要文件（如 Docker）的文件夹中本地运行命令。
• 尝试从头开始重建 Docker 镜像，但问题仍然存在。
• 尝试在 Docker 构建期间在

  vite build

  命令之前列出文件，并且文件也存在。

我希望 Vite 在 Docker 构建过程中能够正确捆绑所有资源，就像在本地环境中一样。但在构建过程中似乎缺少一些文件。

还有其他人在 Docker 构建过程中遇到过类似的 Vite 问题吗？我的 Dockerfile 或 Vite 配置中是否缺少某些内容？任何帮助或建议将不胜感激。

Answer 1

我也有同样的问题。如果我弄清楚了，我会告诉你的。