Nginx部署Vue项目

今天教大家使用Nginx快速的将Vue打包好的Dist文件部署在服务器上供他人访问

⭐关注我查看更多笔记：Linux中安装Nginx

获取dist文件

  • 在 Vue2 / Vue3 项目文件夹下输入以下命令
1
npm run build
  • 在vue项目文件夹下会出现 dist文件夹
  • 将该文件夹上传至服务器 使用 scp 命令 与 XFTP 等均可

Nginx配置

检查nginx

  • 首先检查自己是否安装nginx
  • 未安装请查看我的另一篇安装 nginx 的博客
1
2
3
4
5
# 以下两个命令无效说明 未安装nginx 或 安装在了其他地方
# 出现版本号说明已安装
nginx -V
# 没有配置环境变量使用以下命令查看
/usr/local/nginx/sbin/nginx -V
  • nginx一般安装在 /usr/local/nginx 下
  • 可在 /usr/local/nginx/sbin/nginx 使用

修改配置文件

  • 一般配置文件在目录 /usr/local/nginx/conf 下

  • 不在此处请检查nginx安装地址

  • 使用vim修改 或 在本地修改后上传至服务器均可

1
vim /usr/local/nginx/conf/nginx.conf
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
worker_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

1
2
3
4
5
6
nginx -s reload
# 未配置环境变量使用绝对路径运行
/usr/local/nginx/sbin/nginx -s reload

# 未启动nginx 先启动
nginx

访问部署地址

  • 根据配置文件访问相应地址即可
1
http://112.124.239.485

部署完成！

如果对你有帮助 请帮我点赞👍

关注我查看更多技术文章