nginx部署前端vue项目——手把手教学

摘要：本文将详细介绍如何使用nginx服务器部署前端vue项目，通过实际操作示例，帮助大家轻松掌握部署过程。

一、前言

随着前端技术的不断发展，越来越多的项目采用Vue.js进行开发。而在项目开发完成后，部署到服务器上是必不可少的环节。本文将带领大家使用nginx服务器来部署前端vue项目。

二、准备工作

1. 确保已安装Node.js和npm。
2. 安装vue-cli脚手架工具：`npm install -g @vue/cli`。
3. 搭建一个简单的Vue项目，例如：`vue create my-vue-project`。
4. 安装nginx服务器。

三、部署步骤

1. 打包Vue项目

首先，进入Vue项目目录，执行以下命令进行打包：
 

npm run build

打包完成后，会在项目根目录生成一个名为`dist`的文件夹，里面包含了项目的静态文件。

2. 配置nginx

打开nginx的配置文件（通常位于`/etc/nginx/nginx.conf`或`/etc/nginx/conf.d/`目录下的某个文件），添加以下配置：
 

server {
    listen       80; # 监听的端口
    server_name  localhost;