Hermana de prueba: ¿Por qué el paquete que me diste reportó un error en la página? Yo: No, si no me crees ven a verme!

imagen.png

prefacio

      El año pasado, debido al cambio de trabajo, he estado escribiendo código comercial, pero no he encontrado nada que escribir. Justo ayer, apareció un error en el entorno de prueba. Después de investigar durante más de una hora, finalmente resolví el problema. problema, y ​​decidí hacerlo en el futuro. Pruebe el paquete de producción usted mismo antes de dárselo al paquete de prueba (preferiría matarse a dejar que la prueba genere un error más).

foso técnico

      Cuando llegué a la nueva empresa, mostré mi ambición y decidí planificar la ruta de desarrollo front-end. Por supuesto, no dejaría que vue3+vite eligiera vue3+vite cuando estaba a la vanguardia de la tendencia. Así que la primera el proyecto aún eligió vue3 + webpack, no pregunte por qué webpack, pregunte si es necesario. Como todos sabemos, require no se puede usar en vite, y la mayoría de los marcos utilizados para el desarrollo rápido en el mercado todavía están en la etapa vue2, y el svg en él todavía usa varios require. No tengo mucho tiempo de desarrollo. Todavía reemplacé vite con webpack. Duele, duele demasiado.

reproducción de escena

      Debido a que la situación epidémica en Nanjing es relativamente grave recientemente, la compañía comenzó a trabajar desde casa. Estoy muy feliz. El lindo gatito me acompaña para escribir códigos, e incluso la eficiencia ha aumentado mucho. Después de los dos días difíciles antes y después de que se completó la depuración conjunta del back-end, felizmente lo empaqueté para la prueba. Después de media hora, WeChat sonó. ¿Por qué esta página xxx está abierta y siempre cargando? ¿Cuánto estableció el máximo? ¿Tiempo para la solicitud?¿Hay algún problema?Abra el código con decisión y verá, 10000ms, que es bastante largo. Le dije con confianza a la hermana de prueba: di 10S, suficiente respuesta de interfaz. Así que probé la intranet remota, abrí la página y me dijo que la intranet no funcionaba. No sé qué sucedió ahora. Dije con confianza que lo intentaría y vincularía la dirección local al entorno de prueba. Oye, Estoy bien, especialmente capturas de pantalla para probar, ya ves, es bueno. La hermana de prueba me regañó: te pedí que abrieras la dirección de prueba en lugar de dejarte ejecutar localmente. Así que abrí la página y descubrí que en realidad se estaba cargando todo el tiempo, porque además del entorno de desarrollo, había limpiado la consola y no pude ver ningún error informado. Después de una larga espera de media hora, finalmente se completa el despliegue. ¡Es tan molesto quejarse de la oficina en casa y el embalaje! ! ! Luego subí a ver y encontré que estaba mal, como se muestra en la figura.

imagen.png

¿Cómo puede exceder la pila máxima? Miré mi código y caí en la contemplación. Revisé el código por un lado. No hay recursividad, no hay bucle infinito. Bueno, ¡el problema no está en el código, seguro! Empecé a volverme loco con Baidu. Vi a alguien decir que el espacio de nombres tiene el mismo nombre. Volví a cambiar el nombre, lo empaqueté y tardé media hora. . . Bueno, si no hay accidente, hay un accidente, y todavía se informa el mismo error. Centrándose nuevamente en el código, imprimiendo uno por uno y descubriendo que los datos impresos son muy extraños, y que el entorno de desarrollo y el entorno de prueba son diferentes. Los datos son los siguientes

imagen.png

imagen.pngSe encontró que el problema apareció en... status.queryForm. Estaba claramente inicializado con datos vacíos, pero muchas cosas estarían estructuradas. Debido a que el entorno de desarrollo no reportó un error, este problema fue ignorado en ese momento. No esperaba que el problema estallara después del embalaje. Como hay muchos datos en él, debe haber una operación de asignación, pero después de leer el código, no existe tal cosa.¿Dónde está el problema? ¡Después de la cena, mirando el código de repente descubrió el misterio!

<el-form :model="queryForm" ref="queryForm" :inline="true" size="small">
复制代码

Sabemos que para usar ref en vue3, primero debemos definir ref. Es lamentable que mi ref tenga el mismo nombre que los datos deconstruidos de toRefs, por lo que se asignará inicialmente y, finalmente, el resultado final es jajaja. Aunque no entiendo porque despues de empaquetar... la deconstruccion va a exceder el stack maximo, si alguien lo ve puede comentar, pero efectivamente el problema esta solucionado. Empaquetado, cuando estaba a punto de enviarlo a prueba, de repente me pregunté qué hacer si había un problema. Sería una pérdida de tiempo esperar media hora para implementar a la vez. ¿Hay alguna forma de probar? el paquete empaquetado localmente?

Paquete de prueba local en línea

La razón por la que el servidor puede ejecutar el proyecto es por nginx, por lo que podemos probar el paquete con nginx localmente y podemos hacerlo: El siguiente es el contenido de nginx.conf:


worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

 client_max_body_size  10240m;

    server {
        listen       xxxx;
        server_name   localhost;
        #        default_type 'text/html';

	    #charset utf-8;
	    proxy_set_header X-Real-IP $remote_addr;

        
	}

    server {
        listen      xxx;
        server_name  localhost;

        location / {
            root   D:\xxxxx\dist;
            index  index.html index.htm;
            autoindex on;
            autoindex_exact_size off;
            autoindex_localtime on;
        }

        location /api {
            proxy_pass http://xxxx;
        }
    }

}
复制代码

Debido a que se trata de privacidad, algunas direcciones IP están ocultas y puede definirlas usted mismo. Felizmente probé la bolsa, um, no hay problema, finalmente puedo darle a mi hermana una buena bolsa.

文章创作于2022-02-24
复制代码

Supongo que te gusta

Origin juejin.im/post/7078587660580225032
Recomendado
Clasificación