Nginx 部署前端 Vue 项目详细指南

1. 准备工作

• Vue 项目打包：
  • 运行 npm run build 或 yarn build 将 Vue 项目打包成静态资源。打包后的文件通常位于 dist 目录下。
• Nginx 安装：
  • 确保服务器上已经安装了 Nginx。如果没有安装，请参考官方文档进行安装。
• 服务器环境准备：
  • 确认服务器具有足够的磁盘空间和网络带宽。
  • 开放 Nginx 所需的端口（通常为 80 或 443）。

2. 上传打包后的文件

• 选择传输方式：
  • FTP/SFTP： 使用 FileZilla 等 FTP 工具将 dist 目录下的所有文件上传到服务器上的指定目录。
  • SCP： 使用 SSH 协议的 SCP 命令将文件上传。例如：

    Bash

    scp -r dist/ user@server_ip:/var/www/html/
    

  • rsync： 使用 rsync 命令进行增量同步，效率更高。

3. 配置 Nginx

• 找到 Nginx 配置文件：
  • Nginx 配置文件一般位于 /etc/nginx/nginx.conf