Vue部署项目到阿里云云服务器的实现步骤

2026-03-28 15:38:02发布 4次浏览

详情描述

一、准备阶段

1. 环境准备

# 本地开发环境
npm run build  # 生成 dist 静态文件

# 服务器环境准备
# 需要安装：Nginx、Node.js（可选，如需服务端渲染）

2. 阿里云服务器配置

购买云服务器（ECS）
选择系统：推荐 Ubuntu 20.04+ 或 CentOS 7+
配置安全组规则：
- 开放 80（HTTP）、443（HTTPS）、22（SSH）端口

二、服务器环境搭建

1. 登录服务器

ssh root@你的服务器IP

2. 安装 Nginx

# Ubuntu/Debian
sudo apt update
sudo apt install nginx -y

# CentOS
sudo yum install nginx -y

3. 配置防火墙

# Ubuntu 使用 ufw
sudo ufw allow 'Nginx Full'
sudo ufw allow ssh
sudo ufw enable

# CentOS 使用 firewalld
sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload

三、上传项目文件

方法1：使用 scp 命令

# 本地终端执行
scp -r dist/* root@服务器IP:/var/www/vue-project

# 如果服务器没有目录，先创建
ssh root@服务器IP "mkdir -p /var/www/vue-project"

方法2：使用 Git（推荐）

# 1. 服务器安装 Git
sudo apt install git -y

# 2. 克隆项目
cd /var/www
git clone 你的仓库地址 vue-project
cd vue-project
npm install
npm run build

方法3：使用自动化工具

Jenkins
GitHub Actions
GitLab CI/CD

四、Nginx 配置

1. 创建 Nginx 配置文件

sudo vim /etc/nginx/sites-available/vue-project

2. 配置内容

server {
    listen 80;
    server_name 你的域名或IP;

    # Vue 项目目录
    root /var/www/vue-project/dist;
    index index.html;

    # 启用 gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    # 处理 Vue Router 的 history 模式
    location / {
        try_files $uri $uri/ /index.html;
    }

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

3. 启用配置

# 创建符号链接
sudo ln -s /etc/nginx/sites-available/vue-project /etc/nginx/sites-enabled/

# 测试配置
sudo nginx -t

# 重启 Nginx
sudo systemctl restart nginx

五、HTTPS 配置（可选但推荐）

使用 Let's Encrypt 免费 SSL

# 安装 Certbot
sudo apt install certbot python3-certbot-nginx -y

# 获取证书
sudo certbot --nginx -d 你的域名

# 自动续期测试
sudo certbot renew --dry-run

六、自动化部署脚本

创建 deploy.sh 脚本：

#!/bin/bash
echo "开始部署 Vue 项目..."

# 构建项目
npm run build

# 上传到服务器
rsync -avz -e ssh dist/ root@服务器IP:/var/www/vue-project/dist/

# 重启 Nginx
ssh root@服务器IP "sudo systemctl reload nginx"

echo "部署完成！"

赋予执行权限：

chmod +x deploy.sh
./deploy.sh

七、常见问题解决

1. 路由 404 问题

确保 Nginx 配置中包含：

location / {
    try_files $uri $uri/ /index.html;
}

2. 跨域问题

在 vue.config.js 中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://后端API地址',
        changeOrigin: true
      }
    }
  }
}

3. 静态资源加载失败

检查路径配置：

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}

八、性能优化建议

1. 启用压缩

# Nginx 配置
gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

2. CDN 加速

使用阿里云 OSS + CDN
静态资源上传到 OSS

3. 开启浏览器缓存

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

九、监控和维护

1. 查看 Nginx 日志

# 访问日志
tail -f /var/log/nginx/access.log

# 错误日志
tail -f /var/log/nginx/error.log

2. 进程监控

# 查看 Nginx 状态
systemctl status nginx

# 重启 Nginx
systemctl restart nginx

这样你的 Vue 项目就成功部署到阿里云服务器了！