admin 管理员组

文章数量: 887021

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

  • 一、安装Nginx教程
  • 二、部署Nginx教程
  • 三、卸载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相关文件夹 - 右键 - 删除即可

看到大家有说出现闪的问题（在文件夹双击nginx.exe的时候出现的），没事的哦，只要在任务管理器中有看到在nginx在运行就可以，安装过程中有问题可以私聊我哦

​

本文标签： 项目 系统 Windows Vue nginx

版权声明：本文标题：在 Windows系统中安装、卸载Nginx，及部署Vue项目在Nginx中 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1727815122h1173346.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。