Nginx部署前端Vue项目

1. 项目构建

首先，你需要构建 Vue.js 项目，这一步将你的源代码打包成可以部署的静态文件。

1.1 安装依赖

确保项目中所有依赖都已安装。如果还没有安装依赖，可以运行以下命令：

npm install

1.2 构建项目

使用以下命令来打包项目：

npm run build

这会生成一个 dist/ 目录，里面包含了所有需要部署的静态资源。

2. 配置 Nginx

Nginx 是一个高性能的 HTTP 和反向代理服务器，用于托管静态文件、负载均衡等。

2.1 安装 Nginx

首先确保 Nginx 已安装。如果还没有安装，可以根据操作系统使用以下命令进行安装：

Ubuntu/Debian:

sudo apt update
sudo apt install nginx

CentOS/RHEL:

sudo yum install nginx

MacOS:

brew install nginx

安装完成后，你可以通过以下命令启动 Nginx：

sudo systemctl start nginx

2.2 Nginx 配置文件

Nginx 的主要配置文件通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf。你需要编辑这个文件来配置 Nginx 以托管你的 Vue.js 项目。

使用以下命令打开配置文件：

sudo nano /etc/nginx/conf.d/default.conf
或者：
sudo nano /etc/nginx/nginx.conf

在配置文件中，添加或修改以下配置：

server {
    listen 80;
    server_name your_domain_or_ip;

    root /var/www/html/dist;  # 指向Vue项目的build目录

    index index.html index.htm;

    location /{
        try_files $uri $uri//index.html;}

    # 如果需要，可以在这里添加其他配置，例如代理API请求等
}

2.3 配置解释

listen 80: 配置服务器监听 80 端口，这是 HTTP 的默认端口。
server_name: 配置服务器名称，你可以使用域名或 IP 地址。
root: 设置 Nginx 的根目录，即 Vue.js 项目的 dist/ 目录。
index: 指定默认首页文件，通常是index.html。
location /: 这部分配置了路由规则，try_files $uri $uri/ /index.html;确保了当请求路径不存在时，Nginx 会将请求重定向到 index.html，这是单页应用（SPA）路由的必要配置。

3. 部署项目到服务器

将构建好的 Vue.js 项目部署到服务器的 root 目录。

3.1 上传文件

你可以使用 scp 或者 FTP 等工具将 dist/ 目录上传到服务器上的 /var/www/html/ 目录。

例如，使用 scp：
scp -r dist/* user@your_server_ip:/var/www/html/

3.2 重启 Nginx

上传文件后，重启 Nginx 以应用新的配置：

sudo systemctl restart nginx

4. 测试部署

在浏览器中访问 http://your_domain_or_ip，检查 Vue.js 应用是否正常加载。

5. (可选) 配置 HTTPS

为了安全性，建议配置 HTTPS。你可以使用 Let’s Encrypt 免费获取 SSL 证书并自动配置 Nginx。

使用 certbot 工具安装 SSL 证书：

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your_domain

Certbot 会自动修改 Nginx 配置文件，添加 SSL 支持。

6. 常见问题排查

404 错误: 确保 try_files 配置正确，Vue.js 是一个单页应用，需要配置所有未匹配的路径指向 index.html。
端口问题: 如果你在非 80 端口上运行 Nginx，请确保防火墙允许该端口的访问。

按照以上步骤配置和部署 Vue.js 应用，你的应用应该可以顺利运行在Nginx 上。如果遇到任何问题，可以检查 Nginx 错误日志(/var/log/nginx/error.log) 进行调试。