Windows环境下Docker部署Laravel9时Vite无法加载CSS/JS求助

核心疑问解答：是否需要在容器内运行 npm run dev？ #

• 开发环境临时调试可以用，但生产部署绝对不要依赖npm run dev。npm run dev是启动Vite开发服务器，仅用于本地开发热重载，不会生成可直接访问的静态资源文件；部署时必须用npm run build编译资源到public目录，这也是你和之前Mix工具的核心差异——Mix默认会直接把编译产物输出到public文件夹，而Vite开发模式下仅通过开发服务器提供资源。

具体解决步骤 #

1. 容器内编译静态资源 #

先进入Laravel应用容器：

docker exec -it [你的容器名称/容器ID] bash

然后执行资源编译命令：

npm install
npm run build

执行完成后，Vite会把编译后的app.js、app.css及哈希版本文件生成到public/build目录，页面即可正确加载这些静态资源。

2. 检查Vite配置文件（vite.config.js） #

确保配置适配Docker环境，典型配置如下：

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,
        }),
    ],
    server: {
        host: '0.0.0.0',
        port: 5173,
        watch: {
            usePolling: true, // Windows下Docker文件监听必须开启此项
        },
    },
});

3. 验证Blade模板的资源引入方式 #

必须使用Vite官方提供的@vite指令引入资源，不要手动写固定路径：

<!DOCTYPE html>
<html>
<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

该指令会自动根据环境切换资源路径：开发模式指向Vite开发服务器，生产模式指向public/build下的编译产物。

4. 自动化编译配置（可选） #

如果想让容器启动时自动完成依赖安装和资源编译，可以修改Docker配置：

Dockerfile示例：

FROM php:8.1-fpm

# 安装nodejs等依赖
RUN apt-get update && apt-get install -y \
    nodejs \
    npm \
    # 其他Laravel所需依赖（如git、zip等）

WORKDIR /var/www/html

COPY . .

# 安装PHP依赖
RUN composer install --no-dev --optimize-autoloader

# 安装npm依赖并编译资源
RUN npm install && npm run build

# 设置目录权限
RUN chown -R www-data:www-data /var/www/html/storage /var/www/html/bootstrap/cache

docker-compose.yml示例：

services:
    app:
        build: .
        # 其他配置（端口、卷挂载等）
        command: bash -c "npm install && npm run build && php-fpm"

补充说明 #

页面无报错但资源未加载，本质原因是：Vite开发模式下资源路径指向容器内部的5173端口，宿主机无法直接访问；或者根本没有生成静态资源文件，导致页面找不到对应资源。生产部署时务必确保.env中APP_ENV=production，Laravel会自动切换到Vite生产模式。

内容的提问来源于stack exchange，提问作者Drenyl