【前端部署】Ubuntu22.04 使用nginx部署vue前端项目教程

在Ubuntu 22.04上使用Nginx部署Vue前端项目，你需要先安装Nginx，然后构建你的Vue项目，并将构建的静态文件移动到Nginx可以访问的目录中。以下是简化的步骤和示例：

1. 安装Nginx：

sudo apt update
sudo apt install nginx

2. 启动Nginx服务：

sudo systemctl start nginx
sudo systemctl enable nginx

3. 确保你的Vue项目已经构建：

npm run build

4. 将构建的文件（通常在dist目录）移动到Nginx的服务器根目录下。默认情况下，这个目录是/var/www/html，但你可以通过查看Nginx配置文件来确认：

sudo mv /path/to/your/vue/project/dist/* /var/www/html/

5. 配置Nginx来服务你的Vue应用。编辑Nginx配置文件：

sudo nano /etc/nginx/sites-available/default

6. 确保配置文件中有以下内容，这将指定Nginx服务你的Vue应用：

server {
    listen 80;
    server_name _;
 
    location / {
        root /var/www/html;
        try_files $uri $uri/ /index.html;
        index index.html;
    }
}

7. 重启Nginx以应用更改：

sudo systemctl restart nginx

现在，你的Vue前端应用应该可以通过你服务器的IP地址或域名访问了。如果你的Vue应用需要通过HTTPS访问，你还需要配置SSL证书。