一、环境准备与服务器配置

1.1 百度LS轻量服务器选型与开通

百度LS轻量服务器是面向中小型项目的云服务器解决方案，具有高性价比和快速部署的特点。开通时需注意：

配置选择：建议选择2核4G内存的机型，可满足大多数Vue项目的运行需求。
系统镜像：选择Centos7.9 LTS版本，该版本稳定且兼容性强。
安全组设置：开放22（SSH）、80（HTTP）、443（HTTPS）端口。

1.2 PuTTY工具安装与基础配置

PuTTY是Windows环境下常用的SSH客户端工具，配置步骤如下：

下载PuTTY并安装
创建新会话：
- Host Name：服务器公网IP
- Port：22
- Connection type：SSH
保存会话配置以便后续快速连接

1.3 服务器初始化设置

首次登录后需完成基础环境配置：

# 更新系统软件包
sudo yum update -y
# 安装基础开发工具
sudo yum groupinstall "Development Tools" -y
# 创建专用用户（安全最佳实践）
sudo adduser vuedeploy
sudo passwd vuedeploy
sudo usermod -aG wheel vuedeploy

二、Nginx服务器搭建与配置

2.1 Nginx安装与启动

Centos7.9下安装Nginx的推荐方式：

# 添加EPEL仓库
sudo yum install epel-release -y
# 安装Nginx
sudo yum install nginx -y
# 启动并设置开机自启
sudo systemctl start nginx
sudo systemctl enable nginx

2.2 基础配置优化

编辑Nginx主配置文件：

sudo vi /etc/nginx/nginx.conf

关键优化参数：

worker_processes auto;  # 自动匹配CPU核心数
worker_rlimit_nofile 65535;  # 提高文件描述符限制
events {
    worker_connections 4096;  # 每个worker的最大连接数
    use epoll;  # Linux高效事件模型
}

2.3 Vue项目专用配置

创建专用配置文件：

sudo vi /etc/nginx/conf.d/vue_app.conf

配置示例：

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/vue_app/dist;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    # 静态资源缓存配置
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public";
    }
}

三、Vue项目部署全流程

3.1 项目构建与传输

本地构建生产版本：

npm run build

使用scp命令传输构建文件：

scp -r dist/* vuedeploy@服务器IP:/var/www/vue_app/dist

3.2 服务器端目录权限设置

sudo mkdir -p /var/www/vue_app
sudo chown -R vuedeploy:nginx /var/www/vue_app
sudo chmod -R 755 /var/www/vue_app

3.3 防火墙与SELinux配置

# 开放HTTP服务
sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --reload
# SELinux临时设置（测试环境）
sudo setenforce 0
# 或永久设置（推荐生产环境）
sudo vi /etc/selinux/config
# 修改SELINUX=permissive

四、常见问题解决方案

4.1 403 Forbidden错误排查

检查目录权限：
```
ls -ld /var/www/vue_app/dist
```
验证Nginx用户权限：
```
ps aux | grep nginx
```
检查SELinux上下文：
```
ls -Z /var/www/vue_app/dist
```

4.2 路由404问题处理

确保Nginx配置中包含：

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

4.3 性能优化建议

启用Gzip压缩：

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

配置HTTP/2：
```
listen 443 ssl http2;
```

五、进阶部署技巧

5.1 自动化部署脚本

创建deploy.sh脚本：

#!/bin/bash
echo "开始部署Vue项目..."
npm run build
echo "传输文件到服务器..."
scp -r dist/* vuedeploy@服务器IP:/var/www/vue_app/dist
echo "重启Nginx服务..."
ssh vuedeploy@服务器IP "sudo systemctl restart nginx"
echo "部署完成！"

5.2 多环境配置管理

使用environment变量区分不同环境：

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

5.3 监控与日志分析

配置Nginx日志轮转：

sudo vi /etc/logrotate.d/nginx

示例配置：

/var/log/nginx/*.log {
    daily
    missingok
    rotate 14
    compress
    delaycompress
    notifempty
    create 0640 nginx adm
    sharedscripts
    postrotate
        [ -s /run/nginx.pid ] && kill -USR1 `cat /run/nginx.pid`
    endscript
}

六、安全加固建议

SSH安全：
- 禁用root远程登录
- 使用密钥认证
- 修改默认SSH端口

Nginx安全：

# 隐藏Nginx版本信息
server_tokens off;
# 限制请求方法
if ($request_method !~ ^(GET|HEAD|POST)$ ) {
    return 444;
}

定期更新：

sudo yum update nginx -y
sudo yum update -y

通过以上完整流程，开发者可以在百度LS轻量服务器上高效完成Vue项目的部署。这种技术组合（Centos7.9+PuTTY+Nginx）不仅稳定可靠，而且具有很高的灵活性，适合从个人项目到中小型企业应用的各种场景。建议开发者在实际部署前先在测试环境验证所有步骤，确保生产环境部署的顺利进行。

百度LS轻量服务器实战：Centos7.9+PuTTY+Nginx部署Vue全流程指南