vue 项目部署到nginx 服务器_vue项目部署到nginx服务器

一 vue 项目打包

1 本地环境

npm run build

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

二 nginx

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

sudo yum install nginx

2 查看conf位置

如果不知道的话
nginx -t

[admin@iZf8zfzio8ppow8wx1a15lZ ~]$ sudo nginx -tnginx: the configuration file /www/server/nginx/conf/nginx.conf syntax is oknginx: configuration file /www/server/nginx/conf/nginx.conf test is successful

举例一些代码

# 启动nginxnginx# 启动时权限不够就sudosudo 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:// + 你的域名