Laravel has integrated Vite, a powerful build tool, to enhance its asset compilation process. If you're working with Laravel and Vite, knowing where your compiled assets are stored is essential.
What is Vite?
Vite is a modern frontend build tool that offers fast development and optimized production builds. It's known for its speed and efficiency, making it a great choice for Laravel projects.
Default Build Directory
When you set up Vite in a Laravel project, the default directory for compiled assets is public/build
. This is where Vite places your JavaScript, CSS, and other assets after running the build process.
Default Vite Configuration in Laravel
Here’s a basic example of the Vite configuration in a Laravel project (vite.config.js
):
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue(),
laravel({
input: ['resources/assets/css/app.css', 'resources/assets/js/app.js'],
refresh: true,
}),
],
});
Why public/build
?
The public/build
directory is chosen because it fits well with Laravel’s structure, making the assets easily accessible for your application.
Changing the Build Directory
If you need to change the default build directory, you can easily do so by updating the outDir
property in the vite.config.js
file.
Check this: Change output path for vitejs build in laravel
Benefits of Using Vite
- Speed: Instant hot module replacement (HMR) for fast development.
- Modern: Supports the latest JavaScript features.
- Optimized: Produces highly optimized production builds.
By understanding the default build directory and how to configure it, you can effectively manage your assets in a Laravel project using Vite.