如何在Laravel中使用/集成jQuery？新手求助相关操作问题

Hey there! As someone who's been right where you are when starting out with Laravel, let me walk you through integrating jQuery into your project step by step—no confusing jargon, just straightforward steps.

You’re right to ask: Laravel doesn’t come with jQuery pre-installed, so you’ll need to add it yourself. Here are the two most common (and easy) ways to do this:

Option 1: Use a CDN (Quickest for Beginners) #

This method doesn’t require downloading any files or setting up build tools—perfect for getting started fast.

• Open your main layout view (usually resources/views/layouts/app.blade.php or your custom layout file)
• Add the jQuery CDN link right before the closing </body> tag:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

• Now you can write jQuery code directly in <script> tags in any view that uses this layout. For example:

<script>
    $(document).ready(function() {
        console.log("jQuery is up and running!");
        // Add your jQuery logic here
    });
</script>

Pro tip: Stick with the minified .min.js version for faster page loads. If you’re worried about CDN downtime, you can add a local fallback later, but that’s optional for now.

Option 2: Host jQuery Locally (Good for Offline Work or Customization) #

If you want to keep jQuery files in your project, the steps vary a bit depending on which build tool your Laravel version uses:

For Laravel 9+ (Uses Vite) #

1. Download the latest minified jQuery file, then save it to resources/js/vendor/jquery.min.js (create the vendor folder if it doesn’t exist).
2. Open resources/js/app.js and add these lines to import jQuery and make it globally available (so you can use $ in your views):

// Import the local jQuery file
import './vendor/jquery.min.js';

// Attach jQuery to the window object for global access
window.$ = window.jQuery = require('./vendor/jquery.min.js');

3. Run the Vite build command to compile your assets:

npm run dev

(For production, use npm run build instead)
4. Make sure your layout view includes the compiled app.js file using the Vite directive:

@vite(['resources/js/app.js'])

For Laravel 8 and Below (Uses Mix) #

1. Save the downloaded jQuery file to resources/js/vendor/jquery.min.js as above.
2. Open webpack.mix.js and either copy the file to your public directory:

mix.copy('resources/js/vendor/jquery.min.js', 'public/js/vendor/jquery.min.js');

Or import it directly in resources/js/app.js to bundle it with your other JS:

window.$ = window.jQuery = require('./vendor/jquery.min.js');

3. Run Mix to compile your assets:

npm run dev

4. In your layout view, include the compiled file (or the copied standalone file):

<!-- If you bundled it with app.js -->
<script src="{{ asset('js/app.js') }}"></script>

<!-- If you copied it as a standalone file -->
<script src="{{ asset('js/vendor/jquery.min.js') }}"></script>

How to Verify It’s Working #

Once you’ve set it up, open your browser’s developer console (F12 or Ctrl+Shift+I) and type $ or jQuery. If you see a function returned, jQuery is loaded! You can also test with a quick alert:

$(document).ready(() => alert("jQuery is working!"));

If the alert pops up, you’re good to go.

Final note: Start with the CDN method if you’re new—it’s the least setup. Once you’re comfortable with Laravel’s asset workflow, you can switch to local hosting if needed.

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