【安装配置教程】在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
相关推荐
myloveasuka4 分钟前
[Linux]内核态与用户态详解
linux
@BreCaspian8 分钟前
在HP暗影精灵Ubuntu20.04上修复IntelAX211Wi-Fi不可用的全过程记录——系统安装以后没有WIFI图标&无法使用无线网
linux
小眼睛FPGA13 分钟前
【RK3568+PG2L50H开发板实验例程】Linux部分/FPGA dma_memcpy_demo 读写案例
linux·运维·科技·ai·fpga开发·gpu算力
weixin_4373982121 分钟前
转Go学习笔记
linux·服务器·开发语言·后端·架构·golang
津津有味道30 分钟前
Qt C++串口SerialPort通讯发送指令读写NFC M1卡
linux·c++·qt·串口通信·serial·m1·nfc
eric*16881 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
JeffersonZU1 小时前
Linux/Unix文件IO(文件描述符、原子操作、文件数据结构、open、read、write、fcntl、dup)
linux·c语言·unix·gnu
szekl2 小时前
HDMI 2.0 4×2矩阵切换器412HN——多信号输入输出的高清解决方案
linux·矩阵·计算机外设·电脑·ekl
weixin_399380692 小时前
k8s一键部署tongweb企业版7049m6(by why+lqw)
java·linux·运维·服务器·云原生·容器·kubernetes
阿巴~阿巴~2 小时前
Linux基本命令篇 —— uname命令
linux·运维·服务器