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

目录

一、安装nginx

二、准备项目dist

三、创建配置文件

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

---

一、安装nginx

sudo apt update && sudo apt install nginx -y

二、准备项目dist

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

 

        将其通过scp上传至服务器

scp -r my@192.168.8.128:/home/my/

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

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

vim /etc/nginx/conf.d/vue-project.conf

        文件内容如下

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，检查端口

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

systemctl restart nginx

        访问我们设置的端口

192.168.8.128:90