How to configure the VUE project on the nginx server

Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right

---

foreword

The front-end and back-end separation project
vue is deployed on the nginx of the linux server

step

1 first run locally

npm run build

A dist folder will be generated

2 Open the dist folder on our server and upload it to this directory
. Here I will rename the dist folder to wxpay

3 Then change the nginx.conf configuration file on your server
to add a server

server
    {
    
    
        listen 8083;
        server_name localhost;
        index index.html index.htm index.php;
        root  /www/server/nginx/html/wxpay;
            # location ~ /tmp/ {
      
      
            #     return 403;
            # }

        #error_page   404   /404.html;
        include enable-php.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
    
    
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
    
    
            expires      12h;
        }

        location ~ /\.
        {
    
    
            deny all;
        }
        
        
        # location /api/
        # {
    
    
        #     proxy_redirect off;
        #     proxy_set_header Host $host;
        #     proxy_set_header X-Real-IP $remote_addr;
        #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        #     proxy_pass http://139.111111:8090/api/;
        # }

        access_log  /www/wwwlogs/access.log;
    }

Listen to port 8083.
If the access will locate
the resources in the root directory,
the Vue project will be deployed on the server side through Nginx

---