Nginx部署Vue项目
今天教大家使用Nginx快速的将Vue打包好的Dist文件部署在服务器上供他人访问⭐关注我查看更多笔记：Linux中安装Nginx
获取dist文件
- 在 Vue2 / Vue3 项目文件夹下输入以下命令
npm run build- 在vue项目文件夹下会出现 dist文件夹
- 将该文件夹上传至服务器 使用 scp 命令 与 XFTP 等均可
Nginx配置
检查nginx
- 首先检查自己是否安装nginx
- 未安装请查看我的另一篇安装 nginx 的博客
# 以下两个命令无效说明 未安装nginx 或 安装在了其他地方
# 出现版本号说明已安装
nginx -V
# 没有配置环境变量使用以下命令查看
/usr/local/nginx/sbin/nginx -V- nginx一般安装在 /usr/local/nginx 下
- 可在 /usr/local/nginx/sbin/nginx 使用
修改配置文件
- 一般配置文件在目录 /usr/local/nginx/conf 下
- 不在此处请检查nginx安装地址
- 使用vim修改 或 在本地修改后上传至服务器均可
vim /usr/local/nginx/conf/nginx.confworker_processes 4;
user root;
events {
worker_connections 1024;
}
http {
keepalive_timeout 65;
# 配置响应的文件类型
include mime.types;
# 出现 css/js 无效的问题可使用绝对路径
# include /usr/local/nginx/conf/mime.types;
server {
# 配置访问的端口号
# http默认为 80 端口
listen 80;
# 设置为服务器的外网地址或域名
server_name 112.124.239.485;
# 配置报错文件
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location / {
# dist文件夹的绝对路径
root /root/VuePrj/dist;
# html文件名
index index.html;
autoindex on;
}
# 配置访问日志地址
access_log /root/VuePrj/dist/access.log;
error_log /root/VuePrj/dist/error.log;
}
}重启nginx
nginx -s reload
# 未配置环境变量使用绝对路径运行
/usr/local/nginx/sbin/nginx -s reload
# 未启动nginx 先启动
nginx访问部署地址
- 根据配置文件访问相应地址即可
http://112.124.239.485部署完成！如果对你有帮助 请帮我点赞👍
关注我查看更多技术文章
