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

部署 Vue 项目到阿里云服务器，听起来步骤很多，但拆开来看，核心逻辑其实非常清晰：在本地把项目构建成浏览器能识别的静态文件，然后把它们扔到服务器上，最后让 Nginx 这个“管家”负责把文件分发出去。

下面就以 CentOS 和 Ubuntu 为例，把整个过程捋一遍，先说结论：你真正需要关心的就三件事——构建、上传、配 Nginx。

前提条件

动手之前，先确认一下这几样东西是否就位：

• 一台跑着 Linux 的阿里云 ECS 实例（CentOS 或 Ubuntu 都行）。
• 本地开发环境已经装好了 Node.js 和 npm（或者 yarn）。
• 本地有 SSH 客户端（Mac/Linux 自带，Windows 可以装 OpenSSH）。
• 服务器上已经装了 Nginx。如果还没装，下面会提到怎么装。
• 你有服务器的 SSH 登录权限（用户名密码或者密钥对）。

1. 本地构建 Vue 项目

打开终端，进入你的 Vue 项目根目录，然后执行构建命令：

npm run build
# 或者用 yarn
yarn build

跑完之后，项目根目录会多出一个 dist 文件夹。这个文件夹里装的就是最终用户能看到的所有东西——优化压缩后的 HTML、CSS、Ja vaScript，以及各种静态资源。值得高兴的是，你要上传到服务器的，也就只有这个文件夹里的内容。

2. 服务器环境准备

先登录你的阿里云服务器：

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'

• CentOS（firewalld）：

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

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

这一步是关键——把本地的 dist 文件夹传到服务器。注意，这个操作是在本地终端执行的，不是在服务器上：

scp -r /path/to/your/local/vue-project/dist username@your_server_ip:/path/to/target/directory/on/server

# 示例：把本地的 dist 目录上传到服务器的 /var/www/my-vue-app 目录下
scp -r ./dist user@123.123.123.123:/var/www/my-vue-app

这里的 -r 参数表示递归复制整个目录。上传之前，先确保服务器上的目标路径已存在（可以先用 mkdir -p /path/to/target/directory 创建好）。一个合理的做法是把文件放到 /var/www/your_project_name 这类目录下。

4. 配置 Nginx

文件上传完毕后，回到服务器终端，开始配置 Nginx。创建一个新的配置文件，通常放在 /etc/nginx/conf.d/ 或 /etc/nginx/sites-a vailable/（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 退出）。然后测试配置：

sudo nginx -t

如果输出显示 syntax is ok 和 test is successful，那就没问题。最后重新加载 Nginx 让配置生效：

sudo systemctl reload nginx

5. 访问你的应用

打开浏览器，输入服务器公网 IP 地址（比如 http://123.123.123.123）或者你配置的域名。如果一切顺利，你的 Vue 应用应该已经亮相了。

补充说明

几个容易被忽略但很重要的点：

• HTTPS： 生产环境一定要上 HTTPS。可以从阿里云 SSL 证书服务购买，或者用 Let's Encrypt 申请免费证书。配置的时候需要添加监听 443 端口的 server 块，配置好 ssl_certificate 和 ssl_certificate_key 路径，同样要 sudo nginx -t 和 sudo systemctl reload nginx。
• 域名绑定： 如果用了域名，记得在域名注册商的控制台把域名解析（A 记录）指向你的服务器公网 IP。阿里云域名解析在阿里云 DNS 控制台操作。
• 权限问题： 如果访问时遇到 403 Forbidden 错误，十有八九是权限问题。检查一下 dist 文件夹的权限：ls -l /path/to/dist。Nginx 进程通常以 www-data 或 nginx 用户身份运行，所以可能需要修改权限：sudo chmod -R 755 /path/to/dist，甚至改变所有者：sudo chown -R nginx:nginx /path/to/dist（具体用户视你的 Nginx 配置而定）。
• 路由刷新 404： 如果用了 Vue Router 的 history 模式，刷新页面出现 404，不用怀疑——一定是 Nginx 配置里 try_files $uri $uri/ /index.html; 这行没写对或者漏了。这是最常见的坑，也是最重要的一行配置。

按照这个流程走下来，基本不会出什么大问题。如果遇到特殊情况，优先排查权限和 Nginx 配置这两块，大部分问题都出在这儿。