【安装配置教程】在linux使用nginx部署vue项目

目录

一、安装nginx

二、准备项目dist

三、创建配置文件

四、重新启动nginx,检查端口


一、安装nginx

bash 复制代码
sudo apt update && sudo apt install nginx -y

二、准备项目dist

通常情况下,我们的vue项目可以使用npm run build打包成dist文件,其结构如下图

将其通过scp上传至服务器

bash 复制代码
scp -r my@192.168.8.128:/home/my/

我习惯将其放在/var/www/目录下,并添加权限,顺便再创建一个文件夹,方便后续的项目管理。

bash 复制代码
mkdir -p /var/www/newProject
mv /home/my/dist /var/www/newProject/
chmod 777 /var/www/newProject/ && chmod 777 /var/www/newProject/dist

三、创建配置文件

在/etc/nginx/conf.d/目录下编译配置文件:vue-project.conf

bash 复制代码
vim /etc/nginx/conf.d/vue-project.conf

文件内容如下

bash 复制代码
server {
    listen       90;
    server_name  192.168.8.128; # 替换为域名或服务器IP
    root         /var/www/newProject/dist; # 指向打包后的dist目录
    index        index.html;

    # 处理Vue路由重定向(history模式必须)
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存(可选优化)
    location ~* \.(js|css|png|jpg|gif|svg|woff2)$ {
        expires 7d;
        add_header Cache-Control "public, immutable";
    }

    # 错误页面(可选)
    error_page 404 /index.html;
}

四、重新启动nginx,检查端口

接着我们重新启动,检查页面是否成功可以访问

bash 复制代码
systemctl restart nginx

访问我们设置的端口

bash 复制代码
192.168.8.128:90
相关推荐
MilesShi2 小时前
从 scheduler_tick 到上下文切换:深入解析 Linux 内核的 TIF_NEED_RESCHED 标志设置流程
linux·运维·单片机
我爱云计算5 小时前
K8S详解(5万字详细教程)
linux·运维·云原生·容器·kubernetes
li35746 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj6 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
2301_794333917 小时前
实验室服务器配置|通过Docker实现Linux系统多用户隔离与安全防控
linux·服务器·docker·实验室
荣光波比8 小时前
Nginx 实战系列(一)—— Web 核心概念、HTTP/HTTPS协议 与 Nginx 安装
linux·运维·服务器·nginx·云计算
萌萌哒草头将军9 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
绿箭柠檬茶11 小时前
Ubuntu 使用 Samba 共享文件夹
linux·运维·ubuntu
工藤新一¹12 小时前
Linux —— 虚拟进程地址空间
linux·运维·服务器·c/c++·虚拟进程地址空间
Aspiresky12 小时前
浅析Linux内核scatter-gather list实现
linux·dma·scatter/gather