Entorno del proyecto:
ver3.2.13
vue-cli5.0.0
Nota: este problema solo ocurre en el entorno de desarrollo y no aparecerá después del empaquetado.
Descripción del problema:
Debido a la necesidad de abrir un nuevo proyecto de desarrollo, la introducción de las solicitudes de red necesarias axios y sus asistentes (procesamiento centralizado de solicitudes y datos de devolución), después de todo, axios y asistentes son empleados antiguos y se pueden ejecutar directamente, ¿eh? ¿Cómo salió algo del infierno, por favor vea al juez:
Lo más común antes es ver este tipo de informe de error en la consola, y de repente me siento confundido.
deja de decir tonterias
analizar:
El mensaje de error proviene de los comentarios al solicitar la red. Abra la consola, rastree la fuente del error y vea que es el diputado de axios, y aparece el mensaje de error. Este error no sigue el mecanismo preestablecido, que es decir, no pasa por nuestro mecanismo de procesamiento de concentración de errores.
verificar:
Envío deliberado de parámetros de solicitud incorrectos
El bueno es más largo, jaja, en este punto, he determinado aproximadamente la ubicación del problema. El siguiente paso es resolver el problema.Primero, el archivo del asistente verifica sus propios problemas de código, ok, verifica el problema de la versión de aixos, ok, ya estoy un poco perdido. Beba saliva, mire más de cerca y adivine audazmente, si algo en la fuente de referencia de npm se ha actualizado o algo así, luego verifique cuidadosamente el mensaje de error y bloquéelo en el servidor webpack-dev.
package-lock.json bajo el mecanismo de error normal
package-lock.json bajo el mecanismo de error de pantalla completa
Después de la comparación, se encuentra que la versión se ha actualizado un poco.
Confirma la conjetura:
Directa y groseramente reemplazó la parte cambiada de webpack-dev-server en la ubicación actual en package-lock.json, y se mostró perfecta y normalmente, y el error se mostró en la consola, y no había visualización de pantalla completa
ok confirmado el problema, puedes solucionarlo
Resolver el problema:
Opción 1: Procesamiento de degradación (no es válido de acuerdo con la degradación normal, y los amigos que lo saben esperan hacer un seguimiento y me avisan para aprender)
degradación común
(1), npm desinstalar webpack-dev-server
(2), npm install [email protected]
（3）、npm ejecutar dev
No funciona, lo probé, tal vez no sea adecuado para mi versión, si tiene una reunión, bienvenido a corregirme, gracias
Mi opinión personal es que webpack se ha actualizado solo, por lo que si es nuevo, generará automáticamente la última versión de web-sev-server, que pertenece al archivo fuente y no se puede modificar ni degradar.
Solución 2: configuración de devServer (vue.config.js usado aquí)
Según la configuración del documento de la consulta: (no válido, o no válido, continuar abajo)
devServer: {
client: {
//当出现编译错误或警告时，在浏览器中是否显示全屏覆盖。 示例为只显示错误信息
overlay: {
errors: false,
warnings: false
},
},
},Parece que todavía no soy adecuado para esta configuración, está bien, rastrearé el archivo fuente
Busque webpack-dev-server/client/ovelay.js, verifique el código para encontrar handleError, y lo encontré
Continúe con el seguimiento, vaya a webpack-dev-server/client/index.js y verifique cómo se pasa options.catchRuntimeError
ok, pruébalo
Aquí está, se acabó, um, se acabó, espero que pueda inspirar a algunos lectores, las correcciones son bienvenidas, jejeje, se acabó, ¿de acuerdo?