Store raw assets in the resources/ directory (CSS, JS, images, fonts). 2. Use Laravel Mix (via webpack.mix.js) to compile assets into the public/ folder, leveraging methods like .js(), .sass(), and .version() for processing and cache busting. 3. Run npm run dev for development, npm run production for minified production assets, or npm run watch for automatic recompilation during development. 4. Include compiled assets in Blade templates using the mix() helper (e.g., {{ mix('css/app.css') }}) to ensure proper asset versioning in production. 5. Handle images and fonts by referencing them in CSS (automatically copied by Mix) or manually copying via mix.copy(). 6. Ensure environment-specific handling by setting APP_ENV correctly and relying on mix() to load appropriate assets. 7. For Laravel 9 , Vite may be used instead of Mix—configured via vite.config.js and integrated in Blade with @vite directive. Managing assets effectively involves organizing source files, compiling them through Mix or Vite, and safely including them in views with proper versioning and environment support.
Managing assets (like CSS, JavaScript, images, and fonts) in Laravel is typically done using Laravel Mix, which simplifies working with modern frontend tooling like Webpack. Here's how to manage assets effectively in a Laravel project.

1. Understanding the Asset Structure
By default, Laravel organizes frontend assets in the resources/
directory:
-
resources/css/
– for stylesheets (e.g.,app.css
) -
resources/js/
– for JavaScript files (e.g.,app.js
) -
resources/images/
– for images (optional, not required) -
public/
– compiled and publicly accessible assets go here (e.g.,css/app.css
,js/app.js
)
You should never edit files directly in the public/
folder for source assets — that’s where compiled output goes.

2. Using Laravel Mix to Compile Assets
Laravel Mix provides a fluent API for defining Webpack build steps using a simple JavaScript configuration file: webpack.mix.js
in your project root.
Example webpack.mix.js
:
const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .version(); // Adds cache-busting hashes
This:

- Compiles
app.js
topublic/js/app.js
- Compiles SCSS/Sass file to
public/css/app.css
.version()
appends unique hashes to filenames for cache busting
3. Compiling Assets
Run these commands in your terminal:
npm run dev
– Compile assets for development (no minification)npm run production
– Compile and minify for productionnpm run watch
– Watch files and recompile on changes (great during development)
Make sure you run
npm install
first to install dependencies likelaravel-mix
,sass
,postcss
, etc.
4. Including Assets in Blade Templates
After compiling, include the generated assets in your Blade files (resources/views/layouts/app.blade.php
, etc.):
<!-- CSS --> <link href="{{ mix('css/app.css') }}" rel="stylesheet"> <!-- JavaScript --> <script src="{{ mix('js/app.js') }}"></script>
Using mix()
helper ensures versioned files are loaded correctly in production.
5. Handling Images and Fonts
Place images and fonts in resources/images/
or resources/fonts/
, then reference them in CSS or copy them via Mix.
Option 1: Reference in CSS
.background { background-image: url('../images/bg.jpg'); }
Mix will copy the image to public/images
automatically when referenced.
Option 2: Manually copy assets
Use Mix’s copy()
method in webpack.mix.js
:
mix.copy('resources/images', 'public/images');
6. Environment-Specific Asset Handling
- In local development, you want unminified assets and source maps.
- In production, use
npm run production
to minify and version assets.
Ensure .env
is set correctly:
APP_ENV=local # during development APP_ENV=production
And use mix()
in Blade — it automatically detects whether to load versioned files.
7. Advanced: Using Vite Instead of Mix (Laravel 9 )
Newer Laravel versions support Vite as an alternative to Mix. If your project uses Vite:
- Configuration is in
vite.config.js
- Use
@vite('resources/js/app.js')
in Blade - Run
npm run dev
(Vite dev server) andnpm run build
Check your package.json
to see if you're using Mix or Vite.
Summary
- Store raw assets in
resources/
- Use Laravel Mix (or Vite) to compile to
public/
- Run
npm run dev
,watch
, orproduction
as needed - Use
mix()
or@vite
in Blade templates - Version assets in production to avoid caching issues
Basically, Laravel gives you the tools — just organize your assets, compile them properly, and reference them safely in your views.
The above is the detailed content of How to manage assets in Laravel?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

There are three ways to add custom validation rules in Laravel: using closures, Rule classes, and form requests. 1. Use closures to be suitable for lightweight verification, such as preventing the user name "admin"; 2. Create Rule classes (such as ValidUsernameRule) to make complex logic clearer and maintainable; 3. Integrate multiple rules in form requests and centrally manage verification logic. At the same time, you can set prompts through custom messages methods or incoming error message arrays to improve flexibility and maintainability.

The core methods for Laravel applications to implement multilingual support include: setting language files, dynamic language switching, translation URL routing, and managing translation keys in Blade templates. First, organize the strings of each language in the corresponding folders (such as en, es, fr) in the /resources/lang directory, and define the translation content by returning the associative array; 2. Translate the key value through the \_\_() helper function call, and use App::setLocale() to combine session or routing parameters to realize language switching; 3. For translation URLs, paths can be defined for different languages ??through prefixed routing groups, or route alias in language files dynamically mapped; 4. Keep the translation keys concise and

ToworkeffectivelywithpivottablesinLaravel,firstaccesspivotdatausingwithPivot()orwithTimestamps(),thenupdateentrieswithupdateExistingPivot(),managerelationshipsviadetach()andsync(),andusecustompivotmodelswhenneeded.1.UsewithPivot()toincludespecificcol

Laravelprovidesacleanandflexiblewaytosendnotificationsviamultiplechannelslikeemail,SMS,in-appalerts,andpushnotifications.Youdefinenotificationchannelsinthevia()methodofanotificationclass,andimplementspecificmethodsliketoMail(),toDatabase(),ortoVonage

ServiceProvider is the core mechanism used in the Laravel framework for registering services and initializing logic. You can create a custom ServiceProvider through the Artisan command; 1. The register method is used to bind services, register singletons, set aliases, etc., and other services that have not yet been loaded cannot be called; 2. The boot method runs after all services are registered and is used to register event listeners, view synthesizers, middleware and other logic that depends on other services; common uses include binding interfaces and implementations, registering Facades, loading configurations, registering command-line instructions and view components; it is recommended to centralize relevant bindings to a ServiceProvider to manage, and pay attention to registration

Dependency injection automatically handles class dependencies through service containers in Laravel without manual new objects. Its core is constructor injection and method injection, such as automatically passing in the Request instance in the controller. Laravel parses dependencies through type prompts and recursively creates the required objects. The binding interface and implementation can be used by the service provider to use the bind method, or singleton to bind a singleton. When using it, you need to ensure type prompts, avoid constructor complications, use context bindings with caution, and understand automatic parsing rules. Mastering these can improve code flexibility and maintenance.

Laravel performance optimization can improve application efficiency through four core directions. 1. Use the cache mechanism to reduce duplicate queries, store infrequently changing data through Cache::remember() and other methods to reduce database access frequency; 2. Optimize database from the model to query statements, avoid N 1 queries, specifying field queries, adding indexes, paging processing and reading and writing separation, and reduce bottlenecks; 3. Use time-consuming operations such as email sending and file exporting to queue asynchronous processing, use Supervisor to manage workers and set up retry mechanisms; 4. Use middleware and service providers reasonably to avoid complex logic and unnecessary initialization code, and delay loading of services to improve startup efficiency.

The core methods for handling exceptions and recording errors in Laravel applications include: 1. Use the App\Exceptions\Handler class to centrally manage unhandled exceptions, and record or notify exception information through the report() method, such as sending Slack notifications; 2. Use Monolog to configure the log system, set the log level and output method in config/logging.php, and enable error and above level logs in production environment. At the same time, detailed exception information can be manually recorded in report() in combination with the context; 3. Customize the render() method to return a unified JSON format error response, improving the collaboration efficiency of the front and back end of the API. These steps are
