tengo el siguiente codigo html
<head> <script src="https://unpkg.com/vue@3"></script> <script defer src="script.js"></script> </head> <body> <div id="main"> <div> 1. This is 1st line 2. This is 2nd line 3. This is 3rd line </div> <br> <div style="white-space: pre-line;"> 1. This is 1st line 2. This is 2nd line 3. This is 3rd line </div> </div> </body>Lo cual resultará en
1. This is 1st line 2. This is 2nd line 3. This is 3rd line 1. This is 1st line 2. This is 2nd line 3. This is 3rd lineSin embargo, cuando monto una instancia de Vue en mi div principal, este es el resultado que obtengo
1. This is 1st line 2. This is 2nd line 3. This is 3rd line 1. This is 1st line 2. This is 2nd line 3. This is 3rd lineEl código para la instancia de Vue en el archivo script.js es el siguiente
const test = Vue.createApp({ }).mount("#main")¿Por qué se ignoró por completo mi estilo de espacio en blanco?
El compilador de Vue colapsa los espacios en blanco de forma predeterminada, por lo que las nuevas líneas en su código original se colapsan (se eliminan los espacios en blanco extraños) para producir una salida compilada más eficiente.
Puede deshabilitar esto globalmente en su ejemplo con app.config.compilerOptions.whitespace establecido en 'preserve' :
const app = Vue.createApp({}) app.config.compilerOptions.whitespace = 'preserve' app.mount("#main")O deshabilítelo por componente:
const app = Vue.createApp({ compilerOptions: { whitespace: 'preserve' } }) app.mount("#main") Nota: app.config.compilerOptions.whitespace solo se respeta cuando se usa la compilación completa. De lo contrario, tendría que configurar la opción a través de indicadores de compilación.
Puede configurar @vue/compiler-sfc para deshabilitar la condensación de espacios en blanco en esta configuración de Vite:
// vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { whitespace: 'preserve', 👈 }, }, }), ], })<br> donde se necesita una nueva línea Alternativamente, podría agregar explícitamente etiquetas <br> donde sea necesario, lo que mantendría la optimización prevista originalmente mientras se implementa el espacio deseado:
<div> 1. This is 1st line<br> 2. This is 2nd line<br> 3. This is 3rd line<br> </div>