Nginx virtual host (server block) deploys Vue project

need

Configure a virtual host to implement one Nginx to run multiple services.

accomplish

Use the Server block. Different port numbers represent different services; at the same time, specify the location of the Vue installation package in the configuration.

configuration

Vue project, placed html/testin the directory.

The configuration in config is as follows:

    server {
    
    
       listen       81;
       server_name  localhost;

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

Where the Vue project is placed

The files generated by packaging the Vue project are placed in html/testthe directory of the Nginx server

transfer

Enter the ip and port number in the browser, the display effect is as follows:

http://localhost:81/