vue 项目部署到nginx 服务器

一 vue 项目打包

1 本地环境

npm run build

2 打包完成生成一个dist 文件夹,将其放到服务器指定的文件夹,此文件夹可以在nginx 配置文件中配置

二 nginx

1 根据对应的系统搜索安装命令

sudo yum install nginx

2 查看conf位置

如果不知道的话

nginx -t

复制代码
[admin@iZf8zfzio8ppow8wx1a15lZ ~]$ sudo nginx -t
nginx: the configuration file /www/server/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /www/server/nginx/conf/nginx.conf test is successful

举例一些代码

复制代码
# 启动nginx
nginx
# 启动时权限不够就sudo
sudo nginx
 
# 查看nginx占用端口
ps -ef|grep nginx
# 查看端口占用情况
lsof -i:8080
 
# 查看nginx安装目录、编译参数、配置文件、日志文件的位置等信息
nginx -V
# 查看conf位置
nginx -t
 
# 优雅停止
nginx -s quit
# 立即停止
nginx -s stop
 
# 重载配置文件
nginx -s reload
# 重新打开日志文件
nginx -s reopen

配置文件

在配置文件中,找到 server 块,修改为以下内容,然后进行保存

复制代码
server {
    listen 80;
    server_name your_domain.com;  # 替换为你的域名或服务器 IP

    root /var/www/html/dist;  # 指向 dist 文件夹
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # 支持 Vue 的路由模式
    }

    # 如果需要禁止访问某些文件
    location ~* \.(htaccess|htpasswd|git|env) {
        deny all;
    }

    # 如果需要配置静态文件缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }
}

启动nginx 之前,先进行测试

sudo nginx -t

如果发现绑定端口号有占用 ,使用如下命令查看占用

sudo netstat -tulnp | grep :80

然后杀死进程号

sudo kill -9 1234

然后进行重启服务器

sudo service nginx restart

最后在浏览器访问域名,即可成功

三 上传到文件到服务器

使用scp 命令

scp -r dist/ user@your_server_ip:/var/www/html/

dist 的文件夹

四 安装 SSL 证书

如果需要启用 HTTPS,可以使用 Let's Encrypt 免费 SSL 证书。

1. 安装 Certbot

sudo yum install certbot python3-certbot-nginx

2. 获取 SSL 证书

后面的路径是nginx 配置文件的路径

sudo certbot --nginx --nginx-server-root /www/server/nginx/conf certonly

记得最后验证一下,一定要输入https:// + 你的域名

相关推荐
爱奥尼欧1 小时前
【Linux 系统】基础IO——Linux中对文件的理解
linux·服务器·microsoft
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
戒不掉的伤怀1 小时前
【Navicat 连接MySQL时出现错误1251:客户端不支持服务器请求的身份验证协议;请考虑升级MySQL客户端】
服务器·数据库·mysql
超喜欢下雨天1 小时前
服务器安装 ros2时遇到底层库依赖冲突的问题
linux·运维·服务器·ros2
jingling5551 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
搬码临时工1 小时前
小企业如何搭建本地私有云服务器,并设置内部网络地址提供互联网访问
运维·服务器
old-six-programmer2 小时前
NAT 类型及 P2P 穿透
服务器·网络协议·webrtc·p2p·nat
tan77º2 小时前
【Linux网络编程】网络基础
linux·服务器·网络