1. 准备部署环境
在将 Vite 项目部署到服务器之前，你需要确保服务器已经准备好接收和运行你的应用。这包括安装必要的依赖项、配置网络以及设置防火墙规则等。
安装 Node.js 和 NPM
首先，确保服务器上已经安装了 Node.js 和 NPM。你可以通过以下命令来检查它们是否已经安装：
node -v npm -v
如果它们尚未安装，可以通过以下方式安装：
对于 Ubuntu 或 Debian 系统：
sudo apt update sudo apt install nodejs npm
对于 CentOS 或 RHEL 系统：
sudo yum install epel-release sudo yum install nodejs npm
安装必要的服务器软件
根据你的需求，可能还需要安装一些其他的服务软件，比如 Web 服务器（如 Nginx 或 Apache）或者数据库服务器（如 MySQL 或 MongoDB）。
2. 构建 Vite 项目
在部署到服务器之前，需要先构建你的 Vite 项目。这一步会生成优化过的生产版本代码。
使用 Vite 构建项目
进入你的项目目录，执行以下命令来构建项目：
npm run build
构建完成后，会在项目的 dist 目录下生成所有用于生产的静态文件。
3. 传输文件到服务器
构建完成后，你需要将这些静态文件传输到服务器上。常用的传输工具包括 FTP、SCP 和 rsync 等。
使用 SCP 传输文件
假设你的服务器 IP 地址是 192.168.1.100，用户名是 user，你可以使用以下命令将 dist 目录中的文件传输到服务器的 /var/www/html 目录中：
scp -r dist/* user@192.168.1.100:/var/www/html/
4. 配置 Web 服务器
将文件传输到服务器后，下一步是配置 Web 服务器以正确地服务这些静态文件。
配置 Nginx
如果你选择使用 Nginx 作为 Web 服务器，需要编辑其配置文件来指向你存放静态文件的目录。假设静态文件存储在 /var/www/html 目录下，编辑 Nginx 配置文件：
sudo nano /etc/nginx/sites-available/default
在配置文件中找到 server 块，并添加或修改以下内容：
-- -------------------- ---- -------
------ -
------ ---
----------- ---------------
---- --------------
----- -----------
-------- - -
--------- ---- ----- ------------
-
-保存并关闭文件，然后重启 Nginx 服务使配置生效：
sudo systemctl restart nginx
5. 测试部署结果
完成上述步骤后，打开浏览器访问你的域名或服务器 IP 地址，你应该能看到部署成功的 Vite 应用。
检查错误日志
如果页面无法正常显示，可以查看 Nginx 的错误日志文件，通常位于 /var/log/nginx/error.log，来诊断问题所在。
6. 自动化部署流程
为了提高效率和减少人为错误，可以考虑使用自动化工具来管理部署过程。例如，可以使用 Jenkins、GitLab CI/CD 或者其他的 CI/CD 平台来自动触发构建和部署流程。
使用 GitHub Actions 自动化部署
假设你的代码托管在 GitHub 上，你可以创建一个 GitHub Actions 工作流来实现自动化部署。首先，在你的项目根目录下创建一个名为 .github/workflows/deploy.yml 的文件，并添加以下内容：
-- -------------------- ---- -------
----- ------ -- ------
---
-----
---------
- ----
-----
-------
-------- -------------
------
- ----- -------------------
- ----- ------- -------
----- ---------------------
-----
------------- ----
- ----- ------- ------------
---- --- --
- ----- ----- -------
---- --- --- -----
- ----- -------- -----
----- --------------------------
-----
----- --- ------------ --
--------- --- ---------------- --
--------- --- ---------------- --
----- --
------- -------
------- --------------
- ----- ------- -----
---- ---- --------- ------- -----在这个工作流中，我们定义了当主分支有新的提交时，将会执行一系列步骤：检出代码、安装 Node.js 及依赖项、构建项目、传输文件到服务器，最后重启 Nginx 服务。
通过以上步骤，你可以顺利地将 Vite 项目部署到服务器，并且能够利用自动化工具来简化部署流程。