Install and uninstall Nginx on Windows system, and deploy Vue project in Nginx

1. Install Nginx Tutorial

1. Official website download address: download address
2. Download tutorial: Select the Stable version to download to the local
   
3. After the download is complete, unzip it and put it in a local non-Chinese folder:

4. Start nginx: double-click nginx.exe, if the double-click does not pop up, it means that the port is occupied, please refer to step 6
   

• Appears in Task Manager after double-clicking nginx.exe:
  
• Or use the command line: enter start nginx
  
• Appear in Task Manager with the command:

5. Check whether the startup is successful: enter in the browser: http://localhost:3005, you can see the following interface indicating that the startup is successful
   

6. Open nginx.conf under the conf folder to check the port occupancy:

(1) nginx uses port 80 by default

 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) If the port is occupied, customize the port:

 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;
        #}
    }

2. Deploy Nginx Tutorial

1. Put the packaged dist file into the html folder under the nginx-1.22.1 directory:

1. Modify the server: modify the server in the nginx.conf file (that is, the address after deployment)
   

2. Open http://localhost:3005 again, if it appears as shown in the figure below, it means that the project has been successfully deployed

Note: If the project needs to connect to the back-end project, remember not to close the back-end project. The back-end project must be running, so that it can be used in the entire LAN network. The address used by other PCs to access: http://localhost IP address: port number

At this point, the project deployment steps are completed

3. Uninstall Nginx

1. View ports related to nginx:tasklist /fi "imagename eq nginx.exe" netstat -ano |findstr 3005 //查看3005端口信息
   
   
   

2. Stop the nginx process:taskkill /f /t /im "nginx.exe"

3. **Delete nginx related files directly: **Click on Nginx related folders - right click - delete

​