Laravel+Vue项目中npm run prod生成1字节CSS问题求助

使用Laravel搭配VueJS开发，通过webpack.mix.js生成优化后的CSS与JS文件。执行npm run dev命令时CSS文件可正常生成，但执行npm run prod命令时，生成的CSS文件仅为1字节。

以下是当前使用的webpack.mix.js代码：

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

require('laravel-mix-merge-manifest');

let publicPath = '../../../public/themes/mytheme/assets';

if (mix.inProduction()) {
    publicPath = 'publishable/assets';
}

mix.setPublicPath(publicPath).mergeManifest();
mix.disableNotifications();

try {
    mix
        .js(__dirname + '/src/Resources/assets/js/app-core.js', 'js/velocity-custom-core.js')
        .js(
            __dirname + '/src/Resources/assets/js/app.js',
            'js/velocity-custom.js'
        )

        .copy(__dirname + '/src/Resources/assets/images', publicPath + '/images')

        .sass(
            __dirname + '/src/Resources/assets/sass/admin.scss',
            __dirname + '/' + publicPath + '/css/velocity-admin.css'
        )
        .sass(
            __dirname + '/src/Resources/assets/sass/app.scss',
            __dirname + '/' + publicPath + '/css/velocity.css',
            {includePaths: ['node_modules/bootstrap-sass/assets/stylesheets/']}
        )

        .options({
            processCssUrls: false
        })
        .styles(
            [
                publicPath + '/css/header.css',
                publicPath + '/css/listing-style.css',
                publicPath + '/css/custom-listing-desktop-combined.css'
            ],
            __dirname + '/' + publicPath + '/css/custom-listing-desktop-combined.css'
        )
        .scripts(
            [
                publicPath + '/js/jquery-3.6.0.min.js',
                publicPath + '/js/intlTelInput.min.js',
                publicPath + '/plugins/bootstrap_v5.1/js/bootstrap.bundle.js',
                publicPath + '/js/modernizr-3.11.2.min.js',
                publicPath + '/plugins/Swiper/swiper-bundle.min.js',
                publicPath + '/plugins/sweetalert2/sweetalert2.min.js',
                publicPath + '/plugins/toastr/toastr.min.js',
                publicPath + '/js/jwt-decode.js',
            ],
            __dirname + '/' + publicPath + '/css/custom-combined.js'
        );

    if (mix.inProduction()) {
        mix.minify([__dirname + '/' + publicPath + '/css/custom-combined.css']); // Minify the combined CSS file
        mix.version();
    }
} catch (error) {
    console.error('Error during asset compilation: ' + error.message);
}

核心问题点 #

1. 生产环境依赖文件缺失：生产环境下publicPath切换为publishable/assets，但代码只复制了images目录，需要合并的header.css等CSS文件、JS文件并未被复制到该目录，导致编译时找不到输入文件，生成空CSS。
2. 输入输出文件重名覆盖：styles()方法的输出文件和输入列表里的custom-listing-desktop-combined.css重名，编译时会先清空目标文件，再读取它作为输入，最终得到空文件。
3. 文件路径逻辑错误：合并JS文件时输出到了css目录，不符合规范；手动拼接__dirname + publicPath多余，mix会基于setPublicPath()自动处理路径。

修复后的代码 #

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

require('laravel-mix-merge-manifest');

let publicPath = '../../../public/themes/mytheme/assets';

if (mix.inProduction()) {
    publicPath = 'publishable/assets';
}

mix.setPublicPath(publicPath).mergeManifest();
mix.disableNotifications();

try {
    // 先复制所有需要的静态资源到目标目录，确保生产环境能找到文件
    mix.copy(__dirname + '/src/Resources/assets/css', publicPath + '/css')
       .copy(__dirname + '/src/Resources/assets/js', publicPath + '/js')
       .copy(__dirname + '/src/Resources/assets/plugins', publicPath + '/plugins')
       .copy(__dirname + '/src/Resources/assets/images', publicPath + '/images');

    mix
        .js(__dirname + '/src/Resources/assets/js/app-core.js', 'js/velocity-custom-core.js')
        .js(__dirname + '/src/Resources/assets/js/app.js', 'js/velocity-custom.js')
        .sass(__dirname + '/src/Resources/assets/sass/admin.scss', 'css/velocity-admin.css')
        .sass(
            __dirname + '/src/Resources/assets/sass/app.scss',
            'css/velocity.css',
            {includePaths: ['node_modules/bootstrap-sass/assets/stylesheets/']}
        )
        .options({processCssUrls: false})
        // 修改输出文件名，避免与输入文件重名
        .styles(
            [
                publicPath + '/css/header.css',
                publicPath + '/css/listing-style.css'
            ],
            publicPath + '/css/custom-listing-desktop-combined.css'
        )
        // 修正JS输出路径到js目录
        .scripts(
            [
                publicPath + '/js/jquery-3.6.0.min.js',
                publicPath + '/js/intlTelInput.min.js',
                publicPath + '/plugins/bootstrap_v5.1/js/bootstrap.bundle.js',
                publicPath + '/js/modernizr-3.11.2.min.js',
                publicPath + '/plugins/Swiper/swiper-bundle.min.js',
                publicPath + '/plugins/sweetalert2/sweetalert2.min.js',
                publicPath + '/plugins/toastr/toastr.min.js',
                publicPath + '/js/jwt-decode.js',
            ],
            publicPath + '/js/custom-combined.js'
        );

    if (mix.inProduction()) {
        mix.minify(publicPath + '/css/custom-listing-desktop-combined.css');
        mix.version();
    }
} catch (error) {
    console.error('Error during asset compilation: ' + error.message);
}

额外注意事项 #

• 无需手动拼接输出路径，mix会基于setPublicPath()自动处理相对路径。
• 生产环境编译前，务必确保所有依赖的静态文件都被复制到目标目录。
• 永远避免输入文件和输出文件重名，防止编译时的文件覆盖问题。

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