Nginx简单快速部署Vue的方法

简介

使用Nginx如何快速的把Vue打包好的Dist文件部署在服务器上供别人访问。主要思路是将Vue项目打包成dist包，然后把dist包上传到服务器，安装Nginx，配置Nginx，重启Nginx，具体步骤如下！

先获取dist文件，在Vue2 / Vue3 项目文件夹下输入以下命令：

npm run build

在vue项目文件夹下会出现 dist文件夹；将该文件夹上传至服务器 使用 scp 命令 与 XFTP 等均可。

然后开始配置Nginx，先检查Nginx是否安装完成。nginx一般安装在 /usr/local/nginx 下

可在 /usr/local/nginx/sbin/nginx 使用：

# 以下两个命令无效说明 未安装nginx 或 安装在了其他地方

# 出现版本号说明已安装

nginx -V

# 没有配置环境变量使用以下命令查看

/usr/local/nginx/sbin/nginx -V

修改配置文件目录位于/usr/local/nginx/conf，如果找不到就需要检查Nginx的安装地址，使用vim修改 或 在本地修改后上传至服务器均可。

vim /usr/local/nginx/conf/nginx.conf

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

nginx -s reload

# 未配置环境变量使用绝对路径运行

/usr/local/nginx/sbin/nginx -s reload

# 未启动nginx 先启动

nginx

访问部署地址，根据配置文件访问相应地址即可：

http://112.124.239.485

完成以上步骤即可完成部署。如果您还需要了解更多欢迎关注腾创网！

以上本篇文章的全部内容了，感兴趣的小伙伴可以看看，更多精彩内容关注腾创网www.tengchuangw.com