Laravel API与Vue.js前端部署Hostinger遇阻求助

Hey there, let's work through this Laravel + Vue deployment issue on Hostinger step by step — I’ve tackled this exact setup plenty of times, so I’ll walk you through the key fixes you need to get everything running smoothly.

Hostinger uses public_html as the default web root directory, so your Vue frontend files need to live directly inside it to be accessible when users visit your domain.

• Move your index.html and static folder into the public_html directory (they shouldn’t be sitting alongside it)
• If there’s an empty or unused public_html folder at the same level as your current files, delete it to avoid confusion with the server’s root path.

Your api folder holds the full Laravel project, so we need to make sure API requests route correctly to Laravel’s entry point (public/index.php). Here are two reliable approaches:

Option A: Add a Rewrite Rule to the API Folder #

Create or update the .htaccess file inside your api folder to forward all requests to Laravel’s public directory:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule ^(.*)$ public/$1 [L]
</IfModule>

This way, when someone visits yourdomain.com/api/your-endpoint, the request gets forwarded to api/public/index.php (Laravel’s core entry file).

Option B: Map Laravel’s Public Folder to public_html/api (Recommended) #

Hostinger’s environment works more reliably when web-accessible files are directly under public_html. Here’s how to set this up:

1. Move all files from api/public (including its .htaccess) into a new public_html/api directory
2. Open api/index.php and update the file paths to point to Laravel’s core files correctly:
   Replace these lines:

   require __DIR__.'/../vendor/autoload.php';
   $app = require_once __DIR__.'/../bootstrap/app.php';
   

   With:

   require __DIR__.'/../api/vendor/autoload.php';
   $app = require_once __DIR__.'/../api/bootstrap/app.php';
   

   Now your API’s entry point is public_html/api/index.php, which aligns with Hostinger’s root directory rules and avoids extra rewrite layers.

Your existing .htaccess code was cut off — use the full, standard Laravel public directory configuration to handle routing, authorization headers, and trailing slashes correctly:

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

    RewriteEngine On

    # 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>

Save this as .htaccess in whichever directory holds your Laravel entry point (either api/public or public_html/api depending on the option you chose).

Make sure your Vue app is pointing to the correct API endpoint. If your API is at yourdomain.com/api, configure your HTTP client (like Axios) in Vue:

// In your Vue app's main.js or API service file
axios.defaults.baseURL = '/api';

For production, you can also use the full domain (https://yourdomain.com/api) to avoid any potential cross-origin issues (though same-domain requests shouldn’t have this problem).

Hostinger has strict permission requirements — make sure these are set correctly to avoid errors:

• Set Laravel’s storage and bootstrap/cache directories to 755 (or 775 if your server’s group permissions require it)
• Set all PHP files to 644
• Set all directories to 755
  You can adjust these via Hostinger’s File Manager or SSH:

# For Laravel directories
chmod -R 755 api/storage api/bootstrap/cache
# For PHP files
chmod -R 644 api/**/*.php

Old cached configs or routes can break your deployment. Clear them using SSH (if you have access):

cd api
php artisan config:clear
php artisan cache:clear
php artisan route:clear
php artisan view:clear

If you don’t have SSH access, temporarily add this code to the top of api/public/index.php, visit your API once, then remove it:

<?php
    Artisan::call('config:clear');
    Artisan::call('cache:clear');
    Artisan::call('route:clear');
    Artisan::call('view:clear');

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