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!
Top comments (0)