在Alibaba Cloud Linux 3.2104 LTS上如何部署Vue.js项目？

在 Alibaba Cloud Linux 3.2104 LTS（基于 RHEL 8/CentOS Stream 8 兼容内核，使用 dnf 包管理器）上部署 Vue.js 项目，推荐采用 生产环境最佳实践：即 构建为静态文件 + Nginx 托管（不建议直接用 vue-cli-service serve 部署到生产环境）。以下是完整、安全、可维护的部署步骤：

✅ 前提条件

• 已登录 Alibaba Cloud Linux 3.2104 LTS 服务器（ECS 实例）
• 已配置安全组开放端口（如 80/443）
• 具备 sudo 权限
• 域名（可选，但推荐用于 HTTPS）

🚀 部署步骤（Nginx + 静态文件方式）

1️⃣ 安装必要依赖

# 更新系统
sudo dnf update -y

# 安装 Nginx（Alibaba Cloud Linux 3 默认源已包含）
sudo dnf install -y nginx

# 启动并设置开机自启
sudo systemctl enable nginx
sudo systemctl start nginx

# 验证 Nginx 是否运行（访问 http://<your-server-ip> 应看到欢迎页）
curl -I http://localhost

🔔 提示：若防火墙启用（firewalld），放行 HTTP/HTTPS：

sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload

2️⃣ 安装 Node.js（推荐 v18.x LTS，兼容 Vue 3）

Vue 3（Vite/Vue CLI）推荐 Node.js ≥ 16.14，v18.x 是 LTS 最佳选择：

# 使用 NodeSource 官方仓库安装 Node.js 18
curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -
sudo dnf install -y nodejs

# 验证
node -v  # 应输出 v18.x.x
npm -v   # 应输出 >= 9.x

✅ 替代方案（如需更轻量）：使用 nvm（非 root 用户安装），但生产环境推荐系统级 Node.js。

3️⃣ 构建 Vue 项目（本地或服务器构建）

✅ 推荐方式：在服务器上构建（简单可控，适合中小型项目）

# 创建部署目录（建议非 root 用户操作，例如 deploy 用户）
sudo useradd -m -s /bin/bash deploy
sudo su - deploy

# 进入家目录，克隆你的 Vue 项目（Git）
cd ~
git clone https://your-git-repo/vue-project.git
cd vue-project

# 安装依赖（注意：生产环境无需 devDependencies，但构建需要）
npm ci  # 更快更可靠（需项目有 package-lock.json）

# 构建（生成 dist/ 目录）
npm run build
# ✅ 默认输出到 ./dist/（Vue CLI）或 ./dist/（Vite）

⚠️ 注意：

• 确保 vue.config.js（CLI）或 vite.config.js 中 base 配置正确（如部署在根路径 /，则 base: '/'；若子路径如 /app/，设为 base: '/app/'）。
• 检查 .env.production 中 API 地址是否指向后端真实地址（如 VUE_APP_API_BASE_URL=https://api.yourdomain.com）。

🔄 替代方式：本地构建 + 上传 dist/

# 本地执行 npm run build → 将生成的 dist/ 文件夹整体上传至服务器
# 例如用 rsync：
rsync -avz ./dist/ deploy@<server-ip>:/home/deploy/vue-project/dist/

4️⃣ 配置 Nginx 托管静态文件

# 切换回 root 或 sudo 操作
sudo su -

# 备份默认配置
sudo cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bak

# 创建 Vue 项目专属配置（推荐）
sudo tee /etc/nginx/conf.d/vue-app.conf << 'EOF'
server {
    listen       80;
    server_name  your-domain.com;  # 👈 替换为你的域名或 IP
    root         /home/deploy/vue-project/dist;
    index        index.html;

    # 关键：支持 Vue Router history 模式（避免刷新 404）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存优化
    location ~* .(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 禁止访问敏感文件
    location ~ /. {
        deny all;
    }
}
EOF

# 测试配置语法 & 重载 Nginx
sudo nginx -t
sudo systemctl reload nginx

✅ 此时访问 http://your-domain.com 或 http://<server-ip> 即可看到 Vue 应用。

5️⃣ （可选）配置 HTTPS（强烈推荐）

使用 Alibaba Cloud SSL 证书 + Nginx：

1. 在 阿里云 SSL 证书控制台 申请免费 DV 证书（或上传已有证书）
2. 下载 Nginx 版证书（含 .pem 和 .key 文件）
3. 上传证书到服务器（如 /etc/nginx/ssl/vue-app/）
4. 修改 /etc/nginx/conf.d/vue-app.conf，添加 HTTPS server 块（监听 443），并重定向 HTTP → HTTPS：

server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name your-domain.com;

    ssl_certificate /etc/nginx/ssl/vue-app/your-domain.pem;
    ssl_certificate_key /etc/nginx/ssl/vue-app/your-domain.key;

    # 其他配置同上（root, location 等）
    root /home/deploy/vue-project/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
    # ... 其他静态缓存等
}

✅ 重启：sudo nginx -t && sudo systemctl reload nginx

6️⃣ （可选）自动化与维护建议

❌ 常见错误排查

🔐 SELinux 安全提示（Alibaba Cloud Linux 默认启用）
若将文件放在 /home/deploy/ 下，可能因 SELinux 上下文受限导致 403。推荐做法：

sudo mkdir -p /usr/share/nginx/html/vue-app
sudo chown -R deploy:nginx /usr/share/nginx/html/vue-app
sudo chmod -R 755 /usr/share/nginx/html/vue-app
# 构建时输出到该目录，Nginx root 改为：root /usr/share/nginx/html/vue-app;

✅ 总结：关键命令速查

# 1. 构建（deploy 用户下）
cd ~/vue-project && npm ci && npm run build

# 2. 检查 Nginx 配置
sudo nginx -t

# 3. 重载服务
sudo systemctl reload nginx

# 4. 查看日志（排错）
sudo tail -f /var/log/nginx/error.log
sudo tail -f /var/log/nginx/access.log

如需部署 Nuxt 3 SSR / Vite SSR / 或带后端 API 的全栈应用，可进一步提供需求，我可为你定制 systemd 服务、PM2 或反向X_X方案。

需要我为你生成：

• ✅ 完整的 vue.config.js 示例？
• ✅ systemd 服务文件（用于 Node.js 后端）？
• ✅ 自动化部署脚本（一键拉取 + 构建 + 重启）？
• ✅ Docker + Alibaba Cloud Container Registry 方案？

欢迎随时补充 👇