部署Laravel10+Inertia(Vue3)到Hostinger时出现404及资源错误

问题背景 #

项目基于 Laravel 10 + Vue3 + Inertia 搭建，已完成以下部署操作：

• 将项目 public 目录（含 build 文件夹）复制到服务器根目录的 public_html 文件夹
• 本地执行 npm run build 生成生产环境资源

异常现象：
访问站点时 URL 会自动带上多余的 /public 前缀，同时触发报错：Unable to locate file in Vite manifest: resources/js/Pages/404.vue.，所有请求（包括正常路由）都会出现该错误。

相关配置文件 #

app.blade.php 配置 #

@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
@inertiaHead
</head>
<body class="font-sans antialiased">
    @inertia
</body>

public_html/.htaccess 配置 #

<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 mod_rewrite.c>
      RewriteEngine On
      RewriteRule ^(.*)$ public/$1 [L]
    </IfModule>
</IfModule>

注：已更新 index.php 并添加项目文件夹名称

修复步骤 #

1. 解决 .htaccess 规则冲突问题 #

当前 .htaccess 存在两条冲突的重写规则：

• 第一条规则将非文件/目录请求转发到 index.php
• 第二条规则又将所有请求转发到 public/$1，导致 URL 被强制加上 /public 前缀，触发路由匹配失败

修改方案：删除重复的 Rewrite 规则块，修改后的 .htaccess 如下：

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

2. 修正 Vite 资源路径配置 #

报错提示无法找到 Vite 清单文件中的资源，是因为部署后资源路径与本地开发环境不一致。

修改方案：

• 调整 vite.config.js 中的 base 配置（若站点部署在子目录，填写对应路径，否则设为 /）：

import { defineConfig } 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,
                },
            },
        }),
    ],
    base: '/',
});

• 重新执行 npm run build，将生成的 build 文件夹同步到服务器的 public_html 目录

3. 验证组件文件路径 #

确认 resources/js/Pages/404.vue 文件存在，且文件名大小写与路由定义一致（Linux 服务器区分文件名大小写）

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