Vue 3 配合 Vite 已经成为当前前端工程化的主流方案，本地开发时一切顺利，但项目总归要上线。不少团队会选择 Vultr 这样的海外云服务商，原因很简单：按小时计费、机房遍布全球、开通即用，而且支持自定义镜像。本文就以一个标准的 Vue 3 工程化项目为例，完整走一遍从打包构建到 Vultr 服务器部署的全流程，中间会穿插一些容易踩坑的细节，比如 history 路由刷新 404、资源路径错误等问题。
Vue 3 项目的打包构建与产物分析
部署的第一步是产出可上线的静态文件。Vue 3 项目通常使用 Vite 作为构建工具，执行下面的命令即可在 dist 目录生成产物：
npm run build # 或者显式指定模式 vite build --mode production
构建完成后，dist 目录里主要是 index.html、assets 下的 js 和 css 文件，以及图片字体等静态资源。Vite 默认会给文件名加上内容哈希，比如 index-a1b2c3.js，这意味着每次内容变化文件名都会变，非常适合配置强缓存。需要留意的一个配置是 base：如果项目部署在域名根路径，默认的 / 没问题；如果部署在子路径下，比如 https://ipipp.com/app/，就必须在 vite.config.js 里设置 base: '/app/'，否则会出现资源 404、页面白屏的问题。
另一个常见需求是环境变量。开发环境和生产环境的接口地址往往不同，Vite 约定使用 .env.production 文件存放生产配置，变量必须以 VITE_ 开头才会被注入到客户端代码中，例如 VITE_API_BASE=https://api.ipipp.com。打包前确认好这些变量，能避免上线后接口请求打到错误地址的尴尬。
Vultr 服务器的选购初始化与安全加固
登录 Vultr 控制台后，点击 Deploy New Server，选择 Cloud Compute 共享型实例即可满足中小型前端项目的需求，一个月几美元的套餐跑 Nginx 绰绰有余。地域选择上建议靠近目标用户，亚太用户可以选东京、新加坡节点，欧美用户选法兰克福或纽约。系统推荐 Ubuntu 22.04 LTS，软件源丰富，社区文档也多。
创建完成后 Vultr 会给出 root 密码和公网 IP，先用 SSH 连上服务器：
ssh root@你的服务器IP # 首次连接会提示指纹确认，输入 yes 即可
拿到的裸机不能直接用，先做三件事：更新软件源、创建普通用户、配置密钥登录。密码登录容易遭受暴力破解，建议生成 SSH 密钥对后把公钥写入服务器的 ~/.ssh/authorized_keys，再在 /etc/ssh/sshd_config 中把 PasswordAuthentication 设为 no，最后用 ufw 开放 80、443 和 22 端口。这些步骤虽然琐碎，却是服务器安全的基本盘，公网上的机器每天都会被大量扫描，不做加固等于裸奔。
Nginx 托管静态资源与 history 路由处理
在服务器上安装 Nginx 后，把本地打包好的 dist 目录上传上去。可以用 scp 直接传，也可以用 rsync 增量同步：
# 本地执行，将 dist 内容同步到服务器 rsync -avz --delete dist/ user@服务器IP:/var/www/vue-app/
接着编辑 Nginx 站点配置，核心是把请求指向静态目录。这里有一个 Vue 3 项目最常见的坑：如果路由使用了 history 模式，用户在子路由页面直接刷新会返回 404，因为服务器上并不存在对应路径的物理文件。解决办法是加一条 try_files 回退规则，把所有找不到的路径都重定向到 index.html，交给前端路由处理：
server {
listen 80;
server_name ipipp.com;
root /var/www/vue-app;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
# 带哈希的静态资源设置长缓存
location /assets/ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# 开启 gzip 压缩
gzip on;
gzip_types text/css application/javascript application/json image/svg+xml;
gzip_min_length 1024;
}
配置完成后执行 nginx -t 检查语法，再用 systemctl reload nginx 平滑重载。gzip 对文本类资源的压缩率通常能达到百分之六七十，配合一年期的强缓存策略，二次访问的加载速度会有明显提升。要注意 index.html 本身不要设置长缓存，否则发版后用户拿到的还是旧页面。
HTTPS 证书与自动化部署的进阶实践
现在的主流浏览器都会对纯 HTTP 站点标记不安全，上线后申请证书是必做项。Certbot 提供了免费 的 Let's Encrypt 证书，且支持自动续期，一条命令就能完成 Nginx 的证书配置：
sudo apt install certbot python3-certbot-nginx sudo certbot --nginx -d ipipp.com -d www.ipipp.com # certbot 会自动修改 nginx 配置并添加定时续期任务
如果后端接口部署在其他域名，还需要在 Vue 项目中处理跨域。生产环境推荐由 Nginx 做反向代理，把 /api 路径转发到后端服务，这样前端请求同源地址，无需额外的 CORS 配置，也更安全。
最后聊聊自动化。每次发版手动执行 build 再 rsync 未免繁琐，可以写一个简单的部署脚本，把构建、同步、重载串起来；进阶一点可以在服务器上装 Git，用 webhook 监听仓库推送事件后自动拉取构建。如果团队使用 CI 工具，还可以把 Vultr 服务器配置为部署目标，实现提交代码即自动发布。对于这套流程，你只需要保证 dist 产物的稳定性和 Nginx 配置的正确性，剩下的交给脚本即可。至此，一个 Vue 3 工程化项目就从本地开发环境完整迁移到了 Vultr 全球云服务器上，用户无论身处哪个大洲，都能通过 CDN 级别的节点快速访问你的应用。