nginx部署前端vue项目

1. 将前端代码（如 Vue 或 React 项目）通过 npm run build 打包后部署到 Nginx 上，可以按照以下步骤进行操作：

npm run build

2、将打包文件放到服务器上
将生成的 dist 文件夹放到服务器电脑/home/t14/html/文件下。
3、确保已经安装好nginx。

sudo apt update
sudo apt install nginx

4、 配置 Nginx
编辑 Nginx 的配置文件，通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default下：

server {
    listen 80;  # 监听端口
    server_name your_domain_or_IP;  # 替换为你的域名或服务器 IP

    # 设置前端打包文件的根目录
    root /home/t14/html/dist;  
    index index.html;

    # 配置前端路由
    location / {
        try_files $uri $uri/ /index.html;  # 用于支持前端路由
    }

    # 配置静态资源路径（如果需要）
    location /static/ {
        alias /home/t14/html/dist/static/;  # 替换为静态资源的实际路径
    }

    # 如果有其他静态资源（如 media 文件），可以继续添加类似的配置
    location /media/ {
        alias /home/t14/html/dist/media/;  # 替换为 media 文件的实际路径
    }
}

5、 测试 Nginx 配置
在应用更改之前，最好先检查 Nginx 配置文件是否有语法错误：

sudo nginx -t

如果测试通过，输出会显示 syntax is ok 和 test is successful。
6、 重新加载 Nginx
如果配置文件没有问题，重新加载 Nginx 以应用新的配置：

sudo systemctl reload nginx

7、 验证部署
打开浏览器，访问你的域名或服务器 IP 地址：
http://your_domain_or_IP
如果前端页面正常加载，说明部署成功。