Vite 项目在 Hostinger 上部署失败的完整解决方案

Hostinger 不支持直接运行 vite 开发服务器（npm run dev），需通过构建生产版本（npm run build）生成静态资源并正确部署 public/ 目录，确保 laravel 的 @vite 指令能正常读取 manifest.json。

hostinger 不支持直接运行 vite 开发服务器（`npm run dev`）；需通过构建生产版本（`npm run build`）生成静态资源并正确部署 `public/` 目录，确保 laravel 的 `@vite` 指令能正常读取 `manifest.json`。

Vite 是一个现代前端构建工具，但它本身不是一个可托管的运行时服务——它不提供长期运行的 http 服务器（如 Node.js 后端），而是一个开发时热更新服务 + 构建时静态资源生成器。Hostinger 的共享主机环境（包括其“wordpress Hosting”或“linux Shared Hosting”套餐）仅支持纯静态文件或 PHP 应用（如 Laravel），且不开放 ssh 或自定义进程管理权限，因此你无法在 Hostinger 上持续运行 npm run dev 或 vite 命令。

✅ 正确做法是：使用 Vite 构建生产包，将生成的静态资源集成进 Laravel，并完整部署 public/ 目录。

1. 确保 Vite 配置兼容 Laravel

Laravel 默认已集成 Vite 支持（≥ v9.19）。检查 vite.config.js 是否包含 Laravel 插件配置：

import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin';  export default defineConfig({   plugins: [     laravel({       input: ['resources/css/app.css', 'resources/js/app.js'],       refresh: true,     }),   ], });

该配置会确保构建后生成 public/build/manifest.json 和带哈希的资源文件（如 build/assets/app-abc123.js）。

2. 执行生产构建（关键步骤）

在本地项目根目录运行：

npm run build # 或 yarn build # 或（若使用 pnpm） pnpm build

✅ 此命令会：

• 编译并压缩所有 JS/CSS；
• 生成带内容哈希的文件名（防缓存）；
• 输出 public/build/ 目录及 public/build/manifest.json（Laravel 依赖此文件解析资源路径）。

⚠️ 注意：不要上传 node_modules/、src/、resources/ 等源码目录 —— Hostinger 只需要 public/（含 index.php）和 .env（若需）。

3. 部署到 Hostinger 的正确方式

• 使用 FTP / File Manager 上传整个 public/ 目录内容（非 public 文件夹本身）到 Hostinger 的网站根目录（通常是 public_html/ 或子域名对应目录）；
• 确保 public_html/index.php 存在且为 Laravel 入口；
• 确保 public_html/build/ 目录完整存在，且内含 manifest.json 和 assets/ 子目录；
• 若使用 .env，请手动配置数据库、APP_KEY 等（Hostinger 控制台可能提供环境变量设置入口，但更推荐直接编辑 .env 并设为 644 权限）。

4. 验证 @vite 是否生效

在 Laravel Blade 模板中（如 resources/views/app.blade.php），应使用标准指令：

@vite(['resources/css/app.css', 'resources/js/app.js'])

Laravel 运行时会自动读取 public/build/manifest.json，将其映射为带哈希的 <script> 和 <link> 标签。若部署后页面空白或报 404，请检查：</script>

• public/build/manifest.json 是否存在且 JSON 格式合法；
• 浏览器开发者工具 Network 面板中，/build/assets/xxx.js 是否返回 200；
• Hostinger 是否启用了“Hotlink Protection”等可能拦截 /build/ 路径的规则（如有，请临时关闭测试）。

总结

简言之：Vite 在 Hostinger 上不是“运行”，而是“构建后交付”。丢掉开发服务器幻想，拥抱静态产物部署，才是通往成功的最短路径。