Laravel+InertiaJS+Vue部署Hostinger后仅首页可访问，其余页面404

我把Laravel+InertiaJS+Vue项目部署到Hostinger后，只有首页能正常显示，访问其他路由（比如https://appname.com/shop/all）时会出现GET https://appname.com/shop/all 404 (Not Found)错误。我已经试过调整.htaccess文件、修改.env里的APP_URL、添加ASSET_URL并把APP_ENV设为production，但问题还是没解决。以下是项目的相关配置文件：

.env 配置 #

APP_NAME=Laravel
APP_ENV=production
APP_KEY=base64:kR4cgrq3ND2Ce7ZsHSlsnF/MPinxuAtUod5tQuhS38Q=
APP_DEBUG=false
APP_URL=https://example.com/
ASSET_URL=https://example.com/
LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=secret_name
DB_USERNAME=secret_username
DB_PASSWORD=secret_password

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailpit
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

CLOUDINARY_URL=secret_url
API_KEY=secret_key
API_SECRET=secret_api
CLOUD_NAME=secret_name

app.js 配置 #

import "./bootstrap";
import "../css/app.css";
import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import "primevue/resources/themes/lara-light-blue/theme.css";
import { messages } from "./../../i18n";
import PrimeVue from "primevue/config";
import MainLayout from "./Pages/Layouts/MainLayout.vue";
import Toast from "primevue/toast";
import ToastService from "primevue/toastservice";
import { createI18n } from "vue-i18n";

function getStartingLocale() {
    return localStorage.getItem("locale") || "en";
}

const i18n = createI18n({
    legacy: false,
    locale: getStartingLocale(), // 设置语言
    messages, // 设置语言包
    // 如需其他配置可在此添加
    // ...
});

createInertiaApp({
    title: (title) => `${title} - Eagles Hospitality`,
    resolve: async (name) => {
        const page = await resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob("./Pages/**/*.vue")
        );

        page.default.layout = page.default.layout || MainLayout;

        return page;
    },
    setup({ el, App, props, plugin }) {
        const VueApp = createApp({ render: () => h(App, props) });
        VueApp.config.globalProperties.$route = route;

        return VueApp.use(plugin)
            .use(PrimeVue, { ripple: true })
            .use(ToastService)
            .use(i18n)
            .component("Toast", Toast)
            .mount(el);
    },
    progress: {
        color: "#4B5563",
    },
});

vite.config.js 配置 #

import { defineConfig, splitVendorChunkPlugin } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.js",
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        splitVendorChunkPlugin(),
    ],
});

1. 确认Hostinger服务器重写规则配置 #

• 若使用Apache主机：确保mod_rewrite模块已启用（Hostinger共享主机默认开启，可通过cPanel的「Apache Modules」验证）。
• 若使用Nginx（如VPS）：在站点配置中添加规则，将所有请求转发到index.php：

  location / {
      try_files $uri $uri/ /index.php?$query_string;
  }
  

2. 修复Laravel根目录的.htaccess #

恢复为Laravel官方默认配置（若之前修改过）：

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

    RewriteEngine On

    # 处理权限头
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # 移除末尾斜杠（非目录请求）
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # 所有非文件/目录请求转发到index.php
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

注意：若项目部署在子目录，需在RewriteEngine On后添加RewriteBase /你的子目录/。

3. 检查Inertia路由定义 #

确保routes/web.php中的路由与组件路径对应，例如：

Route::get('/shop/all', function () {
    return Inertia::render('Shop/All');
});

路由中Shop/All需对应resources/js/Pages/Shop/All.vue文件。

4. 重新生成项目缓存 #

通过Hostinger终端或SSH执行以下命令：

php artisan config:cache
php artisan route:cache
php artisan view:cache

执行前确认.env中APP_ENV=production、APP_URL配置正确。

5. 确认Vite构建产物已上传 #

本地执行npm run build生成public/build目录，将该目录完整上传到Hostinger的public目录下，确保静态资源路径正确。

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