Laravel MIX: rewrite path when place project in subfolder

Hi guys, i recently needed to configure the Laravel mix in different ways for the local server and production, the problem was that in my production the project is in a subfolder, the project is a monolith with Laravel, Vue and Inertiajs, after a few struggles, I am able to resolve the issue, I have done the following changes:

In .env added

APP_URL=https://domain.com/subfolder
MIX_ASSET_URL=https://domain.com/subfolder

and also added the following code in config/app.php

...

'mix_url' => env('MIX_ASSET_URL', null),

lastly, I have updated my webpack.mix.js and added public url in the output of webpackConfig in file webpack.mix.js

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .alias({
        ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue'),
    })
    .vue({ version: 3 });

    if (mix.inProduction()) {
        mix.webpackConfig({
            output: {
                chunkFilename: 'js/[name].js?id=[chunkhash]',
                publicPath: '/subfolder/'
            },
            resolve: {
                alias: {
                    '@': path.resolve('resources/js')
                }
            }
        });
    } else {
        mix.webpackConfig({
            output: {
                chunkFilename: 'js/[name].js?id=[chunkhash]',
            }
        });
    }

---

I hope you enjoyed the read!

Feel free to follow me on GitHub, LinkedIn and DEV for more!