Mantengo un proyecto Vue2 en el que recientemente actualicé @vue/cli-service a la versión 5.0.4 (de 4.5.0). Ahora me he dado cuenta de que ya no puedo usar las herramientas de desarrollo de mi navegador para depurar la aplicación. Específicamente, cuando abro devtools y presiono CTRL+P y App.vue , el navegador abre una versión compilada de ese archivo. Anteriormente, abría el archivo fuente original y me permitía colocar puntos de interrupción de trabajo en ese archivo.
Este problema ocurre en Chrome, Edge y Firefox.
Este problema incluso ocurre con el andamio de proyecto predeterminado generado por el último @vue/cli (versión 5.0.4 también), con TypeScript y Babel deshabilitados (por ejemplo, el proyecto generado usando vue create testProject ).
De hecho, este problema incluso ocurre con el andamio de proyecto Vue3/Vite predeterminado generado por npm init vue@latest . Con o sin mecanografiado. No tengo idea de cómo alguien en el ecosistema Vue ya está depurando sus proyectos.
Ya intenté configurar configureWebpack.devtool = 'source-map' , eso no tuvo ningún efecto.
¿Estoy haciendo algo mal?
Esto es trabajo para mí. Traté de reproducir (npm init vue@latest). Cuando presiono ctrl-p, el primer App.vue que se sugiere es, como usted dice, una versión compilada. Pero si sigue buscando en la lista, busque el App.vue que tiene una ruta de directorio después, y debería ver su fuente y poder poner puntos de interrupción. También me gusta abrir mi directorio de origen en la subpestaña del sistema de archivos de la pestaña de fuentes en devtools, y esto también funciona bien, incluidos los puntos de interrupción.