使用Nginx部署Vue应用

最新推荐文章于 2025-07-15 23:00:23 发布

原创最新推荐文章于 2025-07-15 23:00:23 发布 · 1.7k 阅读

标签

#nginx #vue.js #运维 #编程

357 篇文章 ¥29.90 ¥99.00

订阅专栏

本文详述了如何在Linux服务器上使用Nginx部署Vue应用，包括安装Nginx、构建Vue项目、配置Nginx以及最终部署。通过跟随教程，读者将能够将Vue应用高效、稳定地发布到生产环境。

在本文中，我们将讨论如何使用Nginx将Vue应用部署到Linux服务器上。我们将涵盖从安装Nginx到配置和部署Vue应用的整个流程，并提供相应的源代码示例。

第1步：安装Nginx
首先，我们需要在Linux服务器上安装Nginx。请注意，根据您使用的Linux发行版，安装过程可能会有所不同。在大多数基于Debian的发行版上，可以使用以下命令安装Nginx：

sudo apt update
sudo apt install nginx

完成安装后，Nginx将作为一个系统服务运行，并监听80端口。

第2步：构建Vue应用
在将Vue应用部署到Nginx之前，我们需要构建Vue项目。确保已经在本地开发环境中安装了Node.js和Vue CLI。如果尚未安装，请按照Vue官方文档的说明进行安装。

在命令行中，导航到您的Vue项目目录，并执行以下命令来构建项目：

npm run build

这将生成一个dist目录，其中包含用于生产环境的静态文件。

第3步：配置Nginx
一旦Vue应用构建完成，我们需要配置Nginx以便正确地提供静态文件。

使用文本编辑器打开Nginx配置文件（通常位于/etc/nginx/sites-available/default）。删除默认的配置内容，并将以下内容添加到文件中：

server {
    listen 80;
    server_name your_domain.com;  # 替换为您的域名或服务器IP地址

    root /var/www/html

了解本专栏