通过dist包在云服务器部署前端功能指南

• 一、打包与准备dist文件
• 二、云服务器环境准备
• 三、上传dist文件到服务器
• 四、配置Web服务器（Nginx）
• 五、验证部署结果

一、打包与准备dist文件

在前端项目根目录执行npm run build或yarn build生成dist文件夹。需确保：

• 静态资源路径配置正确，建议修改vue.config.js中的publicPath为./以适配非根目录部署
• 检查图片命名不含中文，避免加载异常
• 确认路由模式与服务器配置匹配，history模式需服务端支持

二、云服务器环境准备

推荐选择CentOS或Ubuntu系统，完成以下步骤：

1. 通过云服务商控制台开启80/443端口，若使用非标准端口需单独配置安全组
2. 安装Nginx服务：yum install nginx（CentOS）或apt install nginx（Ubuntu）
3. 准备SSH工具（Xshell/FinalShell）和文件传输工具（Xftp/SFTP）

三、上传dist文件到服务器

通过SFTP或SCP命令将本地dist文件夹上传至服务器，推荐存储路径：

• Nginx默认目录：/usr/share/nginx/html
• 自定义目录：/home/project/frontend（需对应修改Nginx配置）

四、配置Web服务器（Nginx）

编辑/etc/nginx/nginx.conf文件，核心配置如下：

server {
listen 80;
root /path/to/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}

配置完成后执行nginx -s reload重启服务

五、验证部署结果

通过浏览器访问服务器公网IP或域名，需检查：

1. 静态资源加载完整性（CSS/JS/图片）
2. 路由跳转是否正常
3. 控制台无404或500错误

通过标准化构建流程和服务器配置，可实现前端项目的快速部署。关键点包括：正确的资源路径配置、服务器端口管理、Nginx路由适配。建议结合自动化脚本实现持续部署