【前端】Nginx部署前端vue项目---操作步骤详解

以下是详细的操作步骤，用于将前端Vue项目部署到Nginx服务器上：

步骤1：安装Nginx
首先，需要在服务器上安装Nginx。可以使用以下命令在Ubuntu上安装Nginx：

sudo apt-get update
sudo apt-get install nginx

步骤2：构建Vue项目
在本地开发环境中，使用以下命令构建Vue项目：

npm run build

这将在项目的dist目录中生成一个打包好的静态文件。

步骤3：将打包好的文件传输到服务器
将打包好的静态文件（位于dist目录）上传到服务器。

可以使用以下命令使用scp来上传文件（将/path/to/dist替换为dist目录的路径）：

scp -r /path/to/dist username@server_ip:/path/to/destination

步骤4：配置Nginx
进入Nginx配置文件目录，通常位于/etc/nginx或/usr/local/nginx/conf。

cd /etc/nginx

打开Nginx配置文件，通常为nginx.conf或default.conf。

sudo nano nginx.conf

在server块中，添加以下配置：

server {
    listen 80;
    server_name your_domain.com;

    root /path/to/destination;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

确保将your_domain.com替换为您的域名，/path/to/destination替换为上传文件的目标路径。

保存并退出文件。

步骤5：重启Nginx服务
使用以下命令重启Nginx服务，使更改生效：

sudo service nginx restart

步骤6：访问您的应用程序
现在，您可以使用浏览器访问您的应用程序。只需输入您的服务器IP或绑定的域名即可。