部署后 404 错误？解决 Laravel Inertia.js Vue 应用程序在 Hostinger 部署问题

2024-03-13 22:15:42

Laravel Inertia.js Vue 应用程序在 Hostinger 部署后 404 错误

部署 Laravel Inertia.js Vue 应用程序时遇到 404 错误是一件令人沮丧的事情，尤其是当应用程序在本地运行良好时。以下是一步步的指南，帮助你找出问题的根源并找到解决方案：

检查 .htaccess 文件

.htaccess 文件是 Web 服务器配置的关键部分。确保它包含以下内容：

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

    RewriteEngine On

    # Handle Vue history mode with URL rewrites
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
</IfModule>

这些规则告诉 Web 服务器将所有请求重定向到 index.php，这是 Laravel 应用程序的入口点。

检查 .env 文件

.env 文件包含应用程序的配置设置。确保以下内容正确设置：

APP_URL： 应用程序的 URL，例如 https://example.com
ASSET_URL： 应用程序的资源 URL，与 APP_URL 相同
APP_ENV： 设置为 "production"

检查 app.js 文件

app.js 文件是应用程序的入口点。确保它包含以下代码：

import { InertiaProgress } from "@inertiajs/progress";
InertiaProgress.init({ color: "#4B5563" });

这将启用 Inertia 进度条，表明应用程序正在加载中。

检查 vite.config.js 文件

vite.config.js 文件用于配置 Vite，这是一个用于构建和优化 Vue 应用程序的工具。确保它包含以下内容：

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

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.js",
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        inertia({
            resolve: (name) =>
                resolvePageComponent(
                    `./Pages/${name}.vue`,
                    import.meta.glob("./Pages/**/*.vue")
                ),
        }),
        splitVendorChunkPlugin(),
    ],
});