Laravel 8+React项目使用Laravel Mix打包时mp4视频加载失败如何解决

架构老林

2026-10-4

解决方案

第一步：安装依赖
执行以下命令安装file-loader：

npm install file-loader --save-dev
# 如使用yarn则执行：yarn add file-loader --dev

第二步：修改Laravel Mix配置
打开webpack.mix.js文件，添加视频资源处理规则：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .react()
    .sass('resources/sass/app.scss', 'public/css')
    // 新增webpack配置处理视频资源
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.(mp4|webm|ogg|mov)$/i,
                    type: 'asset/resource',
                    generator: {
                        filename: 'videos/[name][ext]'
                    }
                }
            ]
        }
    });

如果你使用的是webpack 4版本，可替换为以下规则：

rules: [
    {
        test: /\.(mp4|webm|ogg|mov)$/i,
        use: [
            {
                loader: 'file-loader',
                options: {
                    outputPath: 'videos/',
                    name: '[name].[ext]',
                    esModule: false
                }
            }
        ]
    }
]

第三步：确认资源路径
保证你的视频文件存放在resources/videos/目录下，与你代码中import的路径一致。
第四步：重新编译
执行以下命令重新编译项目即可正常加载视频：
```
npm run dev
```
可选简化方案
不需要修改配置也可以实现加载：直接将视频文件放入public/videos目录，React代码中无需import，直接写绝对路径引用：
```
<VideoBg autoPlay loop muted src="/videos/video.mp4" type='video/mp4' />
```