Cómo configurar el proyecto VUE en el servidor nginx

Sugerencia: después de escribir el artículo, la tabla de contenido se puede generar automáticamente. Cómo generarla puede consultar el documento de ayuda a la derecha

---

prefacio

El proyecto de separación front-end y back-end
vue se implementa en el nginx del servidor Linux

paso

1 primera ejecución local

npm run build

Se generará una carpeta dist

2 Abra la carpeta dist en nuestro servidor y cárguela en este directorio
. Aquí cambiaré el nombre de la carpeta dist a wxpay

3 Luego cambie el archivo de configuración nginx.conf en su servidor
para agregar un servidor

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

Escuche el puerto 8083.
Si el acceso ubicará
los recursos en el directorio raíz,
entonces el proyecto vue se implementará en el lado del servidor a través de Nginx.

---