1. 准备工作

1.1 申请服务器

首先，您需要申请一台云服务器。这里以天翼云为例，您可以在天翼云官网上选择合适的弹性云主机（ECS）。

1.2 下载资源

下载FinalShell SSH工具，用于远程连接服务器。FinalShell支持Windows、macOS和Linux操作系统。

2. 服务器重装系统

2.1 登录天翼云后台

登录天翼云官网，找到弹性云主机，点击管理。

2.2 关机并重装系统

选择需要重装的服务器，点击关机，然后在操作栏中选择“更多”下的“一键重装”。

2.3 更换操作系统

在重装系统界面，选择合适的操作系统镜像，这里我们选择“centos 7.9 64位”。

2.4 安全设置

设置自定义密码，确保服务器安全。

2.5 获取公网IP地址

重装系统完成后，服务器会分配一个公网IP地址，记录下来以便后续连接。

3. 连接服务器

使用FinalShell连接到服务器，输入用户名和密码进行登录。

4. 安装配置Nginx

4.1 安装Nginx

sudo yum install nginx

4.2 启动Nginx

sudo systemctl start nginx

4.3 设置开机自启

sudo systemctl enable nginx

4.4 配置Nginx

编辑Nginx配置文件，通常位于/etc/nginx/nginx.conf。

sudo vi /etc/nginx/nginx.conf

在server块中添加以下配置：

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /path/to/your/vue/project;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

将/path/to/your/vue/project替换为您的Vue项目存放路径。

4.5 重新加载Nginx配置

sudo systemctl reload nginx

5. 服务器安装Node环境

5.1 安装Node.js

sudo yum install nodejs

5.2 安装npm

sudo yum install npm

6. 打包部署Vue项目

6.1 进入项目目录

cd /path/to/your/vue/project

6.2 打包项目

npm run build

这将生成一个dist文件夹，其中包含生产环境下的静态资源。

6.3 将静态资源移动到Nginx根目录

sudo mv dist/* /path/to/your/nginx/root/

将/path/to/your/nginx/root/替换为您的Nginx根目录。

7. 测试部署效果

在浏览器中输入服务器的公网IP地址，如果看到Vue项目的页面，则说明部署成功！

8. 常见问题及解决方法

  • 问题1：Nginx无法访问静态资源。

解决方法：检查Nginx配置文件中location块下的root路径是否正确。

  • 问题2：Vue项目运行缓慢。

解决方法：检查服务器性能，优化项目代码，或者使用CDN加速。

通过以上步骤，您可以在CentOS上轻松部署Vue项目。希望这份指南能帮助您解决配置烦恼，快速将Vue项目上线！