部署 Vue 项目到云主机通常分为以下几个步骤：
1、本地准备：将 Vue 代码编译打包成静态文件。
2、云主机准备：配置云主机的操作系统、安装 Web 服务器（如 Nginx）。
3、文件上传：将本地打包好的文件上传到云主机的指定目录。
4、Web 服务器配置：配置 Nginx，使其能够正确托管你的静态文件并处理路由（如history 模式）。
5、域名与 HTTPS（可选但推荐）：绑定域名并配置 SSL 证书以实现 HTTPS 安全访问。
这种方式直观，适合学习和简单项目。
在你的 Vue 项目根目录下打开终端，运行打包命令，这会将你的所有代码编译、压缩、优化成浏览器可以直接运行的静态文件（HTML, JS, CSS, 图片等）。
如果你使用 npm npm run build 如果你使用 yarn yarn build
命令执行成功后，项目根目录下会生成一个dist 文件夹。这个文件夹里的所有内容就是要上传到服务器的文件。
1、购买并登录云主机：
* 购买一台云服务器（如 阿里云、腾讯云、AWS 的 ECS/轻量应用服务器）。
* 通过 SSH 工具（如 Terminal, PuTTY, Xshell）登录到你的云服务器。
ssh root@你的云服务器公网IP
2、安装 Web 服务器 (Nginx)：
在云主机上安装 Nginx，以 Ubuntu 系统为例
# 更新软件包列表
sudo apt update
# 安装 Nginx
sudo apt install nginx启动并设置开机自启
sudo systemctl start nginx
sudo systemctl enable nginx* 在浏览器访问你的云服务器公网 IP，应该能看到 Nginx 的默认欢迎页面。
3、创建网站根目录（可选，但推荐）：
* 不建议直接使用 Nginx 默认的根目录，可以创建一个专门的目录来存放你的网站文件。
sudo mkdir -p /var/www/your_domain/html设置正确的目录权限
sudo chown -R $USER:$USER /var/www/your_domain/html
sudo chmod -R 755 /var/www/your_domain有多种方式可以将本地的dist 文件夹内容上传到服务器的网站根目录（例如/var/www/your_domain/html）。
方式 A使用scp 命令（命令行，最直接）
# 在本地终端中执行，将 dist/ 下的所有文件上传到服务器指定目录
scp -r dist/* root@你的云服务器公网IP:/var/www/your_domain/html/输入服务器密码后，文件就会开始上传。
方式 B使用 SFTP 工具（图形化，更友好）
* 使用 FileZilla、WinSCP 等工具。
* 连接协议选择SFTP，主机填你的公网 IP，用户名和密码与 SSH 登录相同。
* 将本地dist 文件夹内的所有文件拖拽到远程站点的/var/www/your_domain/html 目录下。
1、创建 Nginx 配置文件：
* 进入 Nginx 配置目录，通常为/etc/nginx/sites-available/。
创建一个新的配置文件，例如your_domain
sudo nano /etc/nginx/sites-available/your_domain2、编辑配置文件：
* 将以下配置内容粘贴到文件中。请务必将your_domain 替换为你自己的域名，或者直接用服务器 IP 测试。
server {
# 监听 80 端口 (HTTP)
listen 80;
# 设置网站根目录
root /var/www/your_domain/html;
# 设置索引文件
index index.html index.htm;
# 你的域名或服务器 IP
server_name your_domain.com www.your_domain.com;
# 核心配置：处理静态文件和历史路由模式
location / {
# 首先尝试直接找文件，找不到则重写到 index.html
# 这是解决 Vue Router history 模式 404 问题的关键！
try_files $uri $uri/ /index.html;
}
}3、启用配置：
创建一个符号链接到sites-enabled 目录来启用该站点配置
sudo ln -s /etc/nginx/sites-available/your_domain /etc/nginx/sites-enabled/4、测试并重启 Nginx：
检查 Nginx 配置是否有语法错误
sudo nginx -t 如果显示test is successful，则重启 Nginx 使配置生效
sudo systemctl restart nginx在浏览器中输入你的云服务器公网IP 或者你已绑定并解析到该 IP 的域名，就可以看到部署成功的 Vue 应用了！
方法二：自动化部署（适合持续集成/团队协作）
对于频繁更新的项目，手动上传太麻烦，可以使用GitHub Actions、Jenkins 等工具实现自动化部署。
核心思路：代码 Push 到 Git 仓库 → 自动触发 CI/CD 流程 → 自动打包、连接服务器、上传文件、重启服务。
这里简要介绍 GitHub Actions 的流程：
1、在项目根目录创建.github/workflows/deploy.yml 文件。
2、编写 Action 脚本：脚本主要步骤包括：
checkout拉取代码。
setup-node设置 Node.js 环境。
run: npm install && npm run build安装依赖并打包。
使用ssh-action通过 SSH 连接到你的云主机。
使用rsync 或scp 命令将本地dist 目录下的文件同步到服务器网站根目录。
* （可选）执行远程命令，如重启 Nginx。
3、在 GitHub 仓库设置中配置 Secrets：将服务器的HOST（IP）、USERNAME、SSH_PRIVATE_KEY 等敏感信息存为 Secrets，在 Action 脚本中引用，保证安全。
常见问题与解决 (Troubleshooting)
访问 IP 显示 “403 Forbidden” 或 Nginx 默认页
* 检查文件是否上传到了正确的目录。
* 检查 Nginx 配置中的root 路径是否正确。
* 检查目录权限（chmod 755）。
页面空白或资源加载失败 (CSS/JS)
* 通常是因为资源路径错误，检查vue.config.js 中的publicPath 属性（Vue CLI 项目），在大多数情况下设置为'./' 或'/'。
* 确保服务器上的文件路径与 Nginx 配置匹配。
Vue Router 使用history 模式，刷新页面出现 404
这是最关键的一步！ 确保你的 Nginx 配置中包含try_files $uri $uri/ /index.html; 这一行，Apache 服务器也需要类似的重写规则。
服务器连接失败
* 检查云服务器的安全组/防火墙规则是否放行了80（HTTP） 和443（HTTPS） 端口。
希望这份详细的指南能帮助你成功部署 Vue 项目！
文章摘自：https://idc.huochengrm.cn/zj/16211.html
评论