Vite作为当下流行的前端构建工具，以其快速的冷启动和热更新能力受到很多开发者的青睐，而Hostinger是性价比很高的虚拟主机服务商，适合部署静态前端项目。将Vite项目部署到Hostinger需要遵循特定的流程，才能保证项目正常访问。
部署前的准备工作
在开始部署之前，需要确认已经完成以下准备事项：
- 本地已经开发完成可正常运行的Vite项目，并且已经安装好所有依赖
- 已经购买Hostinger的虚拟主机服务，并且获取到主机的FTP账号、密码以及服务器地址
- 本地安装好FTP上传工具，比如FileZilla，或者准备好Hostinger自带的在线文件管理器
本地构建Vite项目
Vite项目开发完成后，需要先构建出用于生产环境的静态文件，不能直接上传开发源码到服务器。
首先打开终端，进入Vite项目的根目录，执行构建命令：
# 安装项目依赖，若已经安装可跳过 npm install # 执行构建命令，生成生产环境文件 npm run build
构建完成后，项目根目录会生成一个dist文件夹，这个文件夹里的所有文件就是需要上传到Hostinger服务器的静态资源。如果构建过程中没有报错，就可以进行下一步的上传操作。
上传文件到Hostinger
我们可以通过FTP工具或者Hostinger的在线文件管理器上传dist文件夹的内容，这里以FileZilla为例说明操作步骤：
- 打开FileZilla，输入Hostinger提供的FTP主机地址、用户名、密码，端口默认填21，点击快速连接
- 连接成功后，在右侧的远程站点面板中，进入
public_html目录，这个目录是Hostinger默认的网站根目录 - 在左侧的本地站点面板中，找到Vite项目构建生成的
dist文件夹，选中里面的所有文件，拖拽到右侧的public_html目录中 - 等待所有文件上传完成，确保没有传输失败的文件
如果使用Hostinger的在线文件管理器，只需要进入public_html目录，点击上传按钮，选择dist文件夹里的所有文件上传即可。
配置路由重定向规则
如果你的Vite项目使用了前端路由，比如Vue Router或者React Router，直接访问非首页的路由会出现404错误，这时候需要配置服务器的重定向规则。
Hostinger使用的是Apache服务器，我们可以在public_html目录下创建或者修改.htaccess文件，添加以下规则：
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
# 如果请求的文件或目录不存在，就重写到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
保存.htaccess文件后，前端路由就可以正常使用了，刷新非首页路由也不会出现404错误。
常见问题及解决方法
资源加载失败
如果出现CSS、JS等资源加载失败的情况，首先检查Vite的构建配置，确保base选项配置正确。如果是部署在根目录，base应该设为/，配置如下：
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
base: '/', // 部署在根目录时配置为/
})
页面空白
页面空白通常是资源路径错误导致的，打开浏览器的开发者工具，查看控制台的错误信息，确认资源的请求路径是否正确，同时检查上传的文件是否完整，有没有遗漏文件。
FTP连接失败
如果FTP连接失败，检查输入的FTP账号密码是否正确，主机地址是否是Hostinger提供的正确地址，也可以尝试更换FTP工具或者联系Hostinger的客服查询账号状态。
部署后验证
所有操作完成后，在浏览器中输入你的Hostinger绑定的域名，检查项目是否可以正常访问，点击各个路由页面确认没有404错误，检查所有的静态资源是否加载正常，确认项目部署成功。