本文详解如何在 hostinger 等共享主机环境正确部署 vite 构建的前端项目，重点澄清“必须运行 npm run dev”的误解，强调应使用生产构建（npm run build）并正确上传 public 目录。
本文详解如何在 hostinger 等共享主机环境正确部署 vite 构建的前端项目，重点澄清“必须运行 npm run dev”的误解，强调应使用生产构建（npm run build）并正确上传 public 目录。
在 Hostinger 等不支持 Node.js 运行时的共享主机上，Vite 的开发服务器（npm run dev）无法也不应被直接部署或启用——因为 Hostinger 仅提供 PHP + Apache/Nginx 静态文件托管服务，不具备执行 vite dev server 所需的 Node.js 进程、热更新机制或 WebSocket 支持。许多开发者误读错误提示（如 “Please run npm run dev”），试图在 Hostinger 控制台执行该命令，这不仅不可行，还会导致部署失败。
✅ 正确做法是：将 Vite 项目构建为静态资源，再将生成的 public/ 目录（或 dist/，取决于配置）完整上传至 Hostinger 的网站根目录（通常为 public_html 或 www）。
1. 确保使用标准 Vite 构建流程
默认 Vite 项目（如 create-vite 初始化）会将构建产物输出到 dist/ 目录。但注意：Laravel 用户常配合 @vite Blade 指令使用，此时 Vite 会依赖 public/build/manifest.json 文件进行资源映射。因此需确认你的构建配置是否适配：
# 标准 Vite 构建（输出至 dist/）
npm run build
# Laravel + @vite 场景下，推荐显式配置构建路径（vite.config.ts）
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,
}),
],
build: {
outDir: 'public/build', // 关键：输出到 public/build，使 @vite 可定位 manifest.json
},
});运行构建后，确保 public/build/manifest.json 存在且内容有效（含带哈希的 JS/CSS 路径映射）。
2. 上传产物而非源码
- ❌ 错误：上传整个项目文件夹（含 src/, vite.config.ts, package.json）
- ✅ 正确：
- 若为纯前端项目：上传 dist/ 下全部文件至 Hostinger 的 public_html/；
- 若为 Laravel + Vite：上传 public/ 整个目录（含 build/ 子目录及 index.php 等），覆盖原有 public_html/ 内容。
? 提示：Hostinger 的文件管理器或 FTP 客户端（如 FileZilla）均可完成上传。请勿遗漏 .htaccess（如需路由重写）或 index.html 的 MIME 类型兼容性设置（Hostinger 默认支持 HTML/JS/CSS）。
3. 常见问题排查
| 现象 | 原因 | 解决方案 |
|---|---|---|
| 页面空白 / 404 JS/CSS | manifest.json 缺失或路径错误 | 检查 public/build/manifest.json 是否存在；确认 @vite 指令调用位置在 public/ 可访问路径下 |
| 资源加载 404（如 /assets/index.xxxx.js） | 构建后资源未上传，或 base 配置与实际 URL 不匹配 | 在 vite.config.ts 中设置 base: '/build/'（若资源位于 /build/ 下），或保持默认 base: '/' 并确保 dist/ 内容直传根目录 |
| CSS/JS 未生效（无哈希、缓存旧版本） | 误用 npm run dev 产物部署 | dev 模式不生成 manifest.json，且资源无哈希，严禁用于生产部署 |
总结
Hostinger 不是 Vite 开发环境，而是静态资源托管平台。部署的核心逻辑是：本地构建 → 生成带哈希的优化产物 → 上传 public/ 或 dist/ → 通过 HTTP 直接访问。牢记 npm run dev 仅用于本地开发调试，而 npm run build 才是生产交付的唯一正确入口。只要构建产物结构清晰、路径匹配、上传完整，Vite 项目即可在 Hostinger 上零配置、高性能运行。
