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

狼道精神 · 发表于 2025-12-30 08:21:56

部署 Vue 项目到阿里云云服务器 (CentOS/Ubuntu 为例)

核心步骤： 在本地构建 Vue 项目生成静态文件，然后将这些文件上传到服务器，并使用 Nginx 作为 Web 服务器提供服务。

前提条件：

一台运行 Linux (如 CentOS 或 Ubuntu) 的阿里云 ECS 实例。
本地开发环境已安装 Node.js 和 npm/yarn。
本地已安装 SSH 客户端 (如 OpenSSH)。
服务器已安装 Nginx。
拥有服务器的 SSH 登录权限 (用户名和密码或密钥对)。

详细步骤：

1. 本地构建 Vue 项目

运行构建命令生成静态文件：

npm run build
# 或者使用 yarn
yarn build

构建完成后，项目目录下会生成一个 dist 文件夹。这个文件夹里包含了所有优化压缩后的 HTML、CSS、JavaScript 和静态资源文件。这就是你需要上传到服务器的内容。

2. 服务器环境准备

登录服务器： 使用 SSH 登录你的阿里云服务器。

ssh username@your_server_ip
# 如果使用密钥，可能需要指定密钥路径
ssh -i /path/to/your-key.pem username@your_server_ip

安装 Nginx (如果未安装)：

Ubuntu:
```
sudo apt update
sudo apt install nginx
```
CentOS:
```
sudo yum update
sudo yum install nginx
```

启动并设置 Nginx 开机自启：

sudo systemctl start nginx
sudo systemctl enable nginx

配置防火墙 (如果启用)： 确保防火墙允许 HTTP (端口 80) 和 HTTPS (端口 443) 的流量。阿里云安全组也需要在控制台开放这些端口。
- Ubuntu (ufw):
```
sudo ufw allow 'Nginx Full' # 允许 HTTP(80) 和 HTTPS(443)
```
- CentOS (firewalld):
```
sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload
```

3. 上传构建文件到服务器

在本地终端 (不是在服务器上)，使用 scp 命令将 dist 文件夹上传到服务器的一个目录。选择一个合适的目录，例如 /var/www/your_project_name 或用户家目录下的某个位置。
```
scp -r /path/to/your/local/vue-project/dist username@your_server_ip:/path/to/target/directory/on/server
# 示例： scp -r ./dist user@123.123.123.123:/var/www/my-vue-app
```
- -r: 递归复制整个目录。
- 替换 /path/to/your/local/vue-project/dist 为你的本地 dist 文件夹的实际路径。
- 替换 username 为你的服务器用户名。
- 替换 your_server_ip 为你的服务器公网 IP 地址。
- 替换 /path/to/target/directory/on/server 为你想存放 dist 文件夹内容的服务器目标路径。确保该目录存在，或者先登录服务器创建它 (mkdir -p /path/to/target/directory)。

4. 配置 Nginx

登录服务器。
创建一个新的 Nginx 服务器块 (Server Block) 配置文件。通常放在 /etc/nginx/conf.d/ 或 /etc/nginx/sites-available/ (Ubuntu) 并在 sites-enabled/ 创建符号链接。这里以 /etc/nginx/conf.d/ 为例：
```
sudo nano /etc/nginx/conf.d/your_project_name.conf
```

在打开的编辑器中，输入类似下面的配置：

server {
    listen 80;
    server_name your_domain.com www.your_domain.com; # 替换为你的域名，或者用服务器IP时写 _ (下划线)
    # server_name _; # 如果没有域名，使用 IP 访问，可以用这个

    root /path/to/your/dist/folder/on/server; # 替换为 dist 文件夹在服务器上的实际路径
    index index.html;

    location / {
        try_files $uri $uri/ /index.html; # 对于 Vue Router 的 history 模式非常重要
    }

    # 可选：配置错误页面
    error_page 404 /index.html;
}

关键点：
- root: 必须指向你上传的 dist 文件夹的路径。
- try_files $uri $uri/ /index.html;: 这是处理前端路由 (如 Vue Router 的 history 模式) 的关键。它告诉 Nginx 在找不到文件时尝试加载 index.html，由 Vue 应用处理路由。
- server_name: 如果你有域名，填域名。如果只用 IP 访问，可以写 server_name _;。

保存并退出编辑器 (在 nano 中按 Ctrl + O 保存，Ctrl + X 退出)。
测试 Nginx 配置： 运行以下命令检查配置文件语法是否正确：
```
sudo nginx -t
```
如果输出显示 syntax is ok 和 test is successful，则配置正确。
重新加载 Nginx: 让新的配置生效：
```
sudo systemctl reload nginx
```

5. 访问你的应用

打开浏览器。
访问你的服务器公网 IP 地址 (例如 http://123.123.123.123) 或者你配置的域名 (例如 http://your_domain.com)。
如果一切配置正确，你应该能看到部署好的 Vue 应用了。

补充说明：

HTTPS (SSL/TLS): 强烈建议在生产环境中使用 HTTPS。你需要获取 SSL 证书 (可以从阿里云 SSL 证书服务购买或使用 Let’s Encrypt 免费证书)，并在 Nginx 配置中添加监听 443 端口的 server 块，配置 ssl_certificate 和 ssl_certificate_key 路径。配置完成后也需要 sudo nginx -t 和 sudo systemctl reload nginx。
域名绑定： 如果你使用域名，需要在你的域名注册商处将域名解析 (A 记录) 指向你的阿里云服务器的公网 IP 地址。阿里云域名解析在阿里云 DNS 控制台操作。
权限问题： 确保 Nginx 进程 (通常是 www-data 或 nginx 用户) 对你上传的 dist 文件夹及其内容有读取权限。如果遇到 403 Forbidden 错误，检查权限 (ls -l /path/to/dist) 并可能需要修改 (sudo chmod -R 755 /path/to/dist, sudo chown -R nginx:nginx /path/to/dist - 根据你的 Nginx 用户调整)。
路由刷新问题： 如果使用 Vue Router 的 history 模式，并且刷新页面时出现 404，一定是 Nginx 配置中缺少或错误配置了 try_files $uri $uri/ /index.html; 这行。仔细检查。

按照以上步骤操作，你应该能够成功地将你的 Vue 项目部署到阿里云服务器上。

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

浏览过的版块