在 Windows系统中安装、卸载Nginx,及部署Vue项目在Nginx中

Windows系统中安装Nginx,及部署Vue项目在Nginx中

一、安装Nginx教程

  1. 官网下载地址:下载地址
  2. 下载教程:选择Stable version版本下载到本地
    在这里插入图片描述
  3. 下载完成后,解压放入本地非中文的文件夹中:

在这里插入图片描述

  1. 启动nginx:双击nginx.exe,若双击未弹出内容,则说明端口被占用,请参照第6步
    在这里插入图片描述
  • 双击nginx.exe后出现在任务管理器中:
    在这里插入图片描述
  • 或者使用命令行:输入start nginx
    在这里插入图片描述
  • 使用命令出现在任务管理器中:在这里插入图片描述
  1. 查看是否启动成功:在浏览器输入:http://localhost:3005,能看到以下界面说明启动成功
    在这里插入图片描述

  2. 打开conf文件夹下的nginx.conf查看端口占用情况:

(1)nginx默认使用80端口

 server {
        #listen       80; //默认使用该端口
        server_name   localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

(2)端口被占用则自定义端口:

 server {
        #listen       80;
		listen        3005; //这里修改为3005端口了
        server_name   localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

二、部署Nginx教程

  1. 将打包的dist文件放入nginx-1.22.1目录下的html文件夹中:

在这里插入图片描述

  1. 修改server:在nginx.conf文件中修改server(即部署后的地址)
    在这里插入图片描述

  2. 再次打开http://localhost:3005,若出现如下图所示,则说明项目已经成功部署

在这里插入图片描述

注意:若是项目需要连接后端项目,切记不要关闭后端项目哦,后端项目要跑起来哦,这样整个LAN网络内均可以使用哦,其他pc访问所使用的地址:http://本机IP地址:端口号

至此项目部署步骤完成

三、卸载Nginx

  1. 查看与nginx相关的端口:tasklist /fi "imagename eq nginx.exe" netstat -ano |findstr 3005 //查看3005端口信息
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  2. 停止nginx进程:taskkill /f /t /im "nginx.exe"在这里插入图片描述

  3. **直接删除nginx相关文件:**点击Nginx相关文件夹 - 右键 - 删除即可

猜你喜欢

转载自blog.csdn.net/m0_50298323/article/details/129991382