本文详解如何将 vite 构建的前端项目（尤其与 laravel 集成场景）正确部署至 Hostinger：关键在于执行 npm run build 生成生产就绪的静态资源，并上传 public/ 目录，而非运行开发服务器。
本文详解如何将 vite 构建的前端项目（尤其与 laravel 集成场景）正确部署至 hostinger：关键在于执行 `npm run build` 生成生产就绪的静态资源，并上传 `public/` 目录，而非运行开发服务器。
Hostinger 是基于共享主机或轻量级云环境的托管平台，不支持长期运行 Node.js 进程（如 vite dev 启动的开发服务器）。因此，试图在 Hostinger 上执行 npm run dev 或依赖实时 HMR 服务是不可行的——这正是你看到“Please use npm run dev”提示的根本误解来源：该提示通常来自本地开发环境误判，或 Laravel 模板中 @vite 指令未找到构建产物所致。
✅ 正确部署流程（以 Laravel + Vite 为例）
Vite 在 Laravel 中通过 @vite Blade 指令注入资源，其底层逻辑依赖 public/build/manifest.json 文件进行资产映射。该文件仅在生产构建后生成，开发模式（vite dev）下不存在。
你需要做的是：
-
本地完成构建
在项目根目录执行：npm run build # 或使用 pnpm/yarn（若已配置） # pnpm run build # yarn build成功后，Vite 将输出优化后的静态文件至 public/build/（默认路径），并生成 public/build/manifest.json。
-
上传构建产物
将整个 public/ 目录（含 build/ 子目录、index.html 等）上传至 Hostinger 的网站根目录（通常是 public_html/ 或你绑定域名的对应目录）。
⚠️ 注意：不要上传 src/、node_modules/ 或 vite.config.js 等源码文件——Hostinger 只需静态资源。 -
验证 Blade 模板调用
确保你的 resources/views/app.blade.php 或布局文件中正确使用：@vite(['resources/css/app.css', 'resources/js/app.js'])Laravel Mix/Vite 插件会自动读取 manifest.json，将逻辑路径解析为带哈希的 CDN 友好 URL（如 /build/app.abc123.js），实现缓存失效控制。
❌ 常见误区与排查
-
错误：尝试在 Hostinger ssh 中运行 npm run dev
Hostinger 共享主机不开放持久化端口监听，且 Node.js 版本/权限受限，必然失败。开发必须在本地完成。 -
错误：只上传 dist/ 目录（Vite 默认）但 Laravel 期望 public/build/
若你未修改 Vite 输出路径，请确认 vite.config.js 中是否保留 Laravel 推荐配置：// vite.config.js export default defineConfig({ build: { outDir: 'public/build', // ← 关键：匹配 Laravel @vite 查找路径 manifest: true, }, }) -
错误：上传后页面空白或报 404
检查浏览器开发者工具 → Network 标签页，确认 manifest.json 和 .js/.css 文件返回 200。若为 404，请核对上传路径是否遗漏 build/ 子目录层级。
✅ 总结
Hostinger 不是 Vite 开发服务器的运行环境，而是静态资源托管平台。部署 Vite 项目的本质是：本地构建 → 上传 public/ → 由 Web 服务器（apache/nginx）直接服务静态文件。只要确保 manifest.json 存在且路径匹配，@vite 指令即可正常工作，享受哈希化资源、自动缓存失效等生产级特性。无需任何服务器端 Node.js 运行时支持。