使用XAMPP时Livewire失效，PHP artisan serve下正常的问题求助

Hey there! Let's figure out why Livewire's failing to prevent default form submissions when you access your Laravel project via XAMPP (http://localhost/daily/public/)—especially since it works perfectly with php artisan serve. This is almost always related to path/configuration mismatches in subdirectory setups, so let's break down the fixes step by step:

1. Fix Environment URL Configuration #

Livewire relies on your app's base URL to load assets and handle AJAX requests correctly. When using a subdirectory (like /daily/public/), your .env file needs accurate settings:

Update your .env file with these values:

APP_URL=http://localhost/daily/public
ASSET_URL=http://localhost/daily/public

Then clear your Laravel caches to apply the changes:

php artisan config:clear
php artisan cache:clear
php artisan view:clear

2. Adjust Apache Rewrite Rules (.htaccess) #

XAMPP's Apache needs proper rewrite rules to handle Laravel's routing in a subdirectory. Open the public/.htaccess file in your project and update the RewriteBase line to match your subdirectory path:

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On
    # Add this line to point to your subdirectory
    RewriteBase /daily/public/

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

Also, make sure Apache's mod_rewrite module is enabled:

• Open XAMPP's Apache configuration file (httpd.conf)
• Find the line #LoadModule rewrite_module modules/mod_rewrite.so
• Remove the leading # to uncomment it
• Restart Apache from the XAMPP control panel

3. Verify Livewire Asset Loading #

If Livewire's JavaScript isn't loading correctly, it can't intercept form submissions. Check your page source (right-click → View Page Source) and search for livewire.js:

• The URL should look like http://localhost/daily/public/livewire/livewire.js
• If you see a 404 error for this file in your browser's DevTools Console, double-check your ASSET_URL and APP_URL settings in .env

4. Double-Check Form Markup #

Ensure your form is using Livewire's wire:submit.prevent directive correctly—this is what tells Livewire to block the default form submission:

<form wire:submit.prevent="yourSubmitMethod">
    <!-- Form fields here -->
    <button type="submit">Submit</button>
</form>

Avoid adding a traditional action attribute to the form tag, as this will override Livewire's behavior.

5. Check for CSRF Token Issues #

Livewire uses Laravel's CSRF token to validate requests. Make sure your layout includes the CSRF meta tag in the <head> section:

<meta name="csrf-token" content="{{ csrf_token() }}">

If this tag is missing or has an invalid token, Livewire will reject the AJAX request and fall back to the default form submission.

Start with these steps—most XAMPP/Livewire subdirectory issues are resolved by fixing the URL configuration or rewrite rules. If you still run into problems, check your browser's DevTools Console for JavaScript errors (they'll often point you to the exact issue).

内容的提问来源于stack exchange，提问作者Benzigar J S